From b51001f740d2ea893d5bd28b7e98651e40888bcf Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Mon, 20 Jan 2020 22:22:25 +0100
Subject: [PATCH 01/26] refactor: Redux toolkit + TypeScript

---
 .babelrc                                      |  41 ---
 babel.config.js                               |  58 ++++
 package.json                                  |  11 +-
 src/{react => }/Actions/filters.js            |   0
 .../Actions/master_card_action_info.js        |  26 +-
 .../Actions/master_card_actions.js            |   6 +-
 src/{react => }/Actions/modal.js              |   0
 src/{react => }/Actions/note_texts.js         |   2 +-
 src/{react => }/Actions/oauth.js              |   0
 src/{react => }/Actions/options.js            |   0
 src/{react => }/Actions/pagination.js         |   0
 src/{react => }/Actions/pay.js                |  14 +-
 src/{react => }/Actions/payment_info.js       |   4 +-
 src/{react => }/Actions/payments.js           |   6 +-
 src/{react => }/Actions/pending_payments.js   |   0
 src/{react => }/Actions/queue.js              |   0
 src/{react => }/Actions/registration.js       |  75 +++--
 src/{react => }/Actions/request_inquiries.js  |   4 +-
 src/{react => }/Actions/request_inquiry.js    |  13 +-
 .../Actions/request_inquiry_batches.js        |   4 +-
 .../Actions/request_inquiry_info.js           |   4 +-
 src/{react => }/Actions/request_response.js   |  21 +-
 .../Actions/request_response_info.js          |   4 +-
 src/{react => }/Actions/request_responses.js  |   4 +-
 src/{react => }/Actions/savings_goals.js      |   0
 src/{react => }/Actions/scheduled_payments.js |   2 +-
 ...share_invite_monetary_account_inquiries.js |   2 +-
 .../share_invite_monetary_account_inquiry.js  |   9 +-
 .../share_invite_monetary_account_response.js |   8 +-
 ...share_invite_monetary_account_responses.js |   2 +-
 src/{react => }/Actions/sidebar.js            |   0
 src/{react => }/Actions/user.js               |   8 +-
 src/{react => }/Actions/users.js              |   2 +-
 src/{react => }/Reducers/general_filter.js    |   0
 src/{react => }/Reducers/index.js             |   4 +-
 .../Reducers/master_card_action_info.js       |   0
 .../Reducers/master_card_actions.js           |   7 +-
 src/{react => }/Reducers/modal.js             |   0
 src/{react => }/Reducers/note_texts.js        |   0
 src/{react => }/Reducers/oauth.js             |   2 +-
 src/{react => }/Reducers/options.js           |   2 +-
 src/{react => }/Reducers/pagination.js        |   0
 src/{react => }/Reducers/pay.js               |   0
 src/{react => }/Reducers/payment_filter.js    |   0
 src/{react => }/Reducers/payment_info.js      |   0
 src/{react => }/Reducers/payments.js          |   6 +-
 src/{react => }/Reducers/pending_payments.js  |   6 +-
 src/{react => }/Reducers/queue.js             |   0
 src/{react => }/Reducers/registration.js      |   0
 src/{react => }/Reducers/request_filter.js    |   0
 src/{react => }/Reducers/request_inquiries.js |   6 +-
 src/{react => }/Reducers/request_inquiry.js   |   0
 .../Reducers/request_inquiry_batches.js       |   6 +-
 .../Reducers/request_inquiry_info.js          |   0
 src/{react => }/Reducers/request_response.js  |   0
 .../Reducers/request_response_info.js         |   0
 src/{react => }/Reducers/request_responses.js |   6 +-
 src/{react => }/Reducers/savings_goals.js     |   6 +-
 .../Reducers/scheduled_payments.js            |   0
 src/{react => }/Reducers/search_filter.js     |   0
 ...share_invite_monetary_account_inquiries.js |   4 +-
 .../share_invite_monetary_account_inquiry.js  |   0
 ...share_invite_monetary_account_responses.js |   4 +-
 src/{react => }/Reducers/sidebar.js           |   0
 src/{react => }/Reducers/user.js              |   0
 src/{react => }/Reducers/users.js             |   0
 src/app.js                                    |   2 -
 src/app.ts                                    |   5 +
 src/{background.js => background.ts}          |  28 +-
 .../AccountCard.tsx}                          |  16 +-
 .../AccountAvatarCircularProgress.tsx}        |  10 +-
 .../AccountList/AccountList.tsx}              |  63 ++--
 .../AccountList/AccountListItem.tsx}          |  51 +--
 .../AccountList/AccountListItemChip.tsx}      |   2 +-
 .../AccountList/AddAccount.tsx}               |   2 +-
 .../AliasList.tsx}                            |   6 +-
 src/{react/App.jsx => components/App.tsx}     |  18 +-
 .../AttachmentImage/AttachmentImage.tsx}      |  14 +-
 .../AttachmentImage/LazyAttachmentImage.tsx}  |   4 +-
 .../BunqDesktopClient.ts                      |  10 +-
 .../BunqMeTabList.tsx}                        |  20 +-
 .../Categories/CategoryChip.tsx}              |   3 +-
 .../Categories/CategoryChips.tsx}             |  30 +-
 .../Categories/CategoryEditor.tsx}            |  41 ++-
 .../Categories/CategoryHelper.ts}             |   0
 .../Categories/CategoryIcon.tsx}              |   0
 .../Categories/CategoryIcons.tsx}             |   0
 .../Categories/CategorySelector.tsx}          |  24 +-
 .../Categories/CategorySelectorDialog.tsx}    |   6 +-
 .../Categories/PrioritySorter.ts}             |   0
 .../CodeSplitting/ComponentLoader.tsx}        |   0
 .../CodeSplitting/Loading.tsx}                |   4 +-
 .../CombinedList/CombinedList.tsx}            |  29 +-
 .../CombinedList/EventData.tsx}               |   2 +-
 .../CombinedList/ListControls.tsx}            |   0
 .../CombinedList/MapperFunctions.tsx}         |   4 +-
 .../CopyToClipboardWrap.tsx}                  |   0
 .../CustomIcon.tsx}                           |   0
 .../CustomSVG/FileDownload.tsx}               |   0
 .../CustomSVG/FileUpload.tsx}                 |   0
 .../CustomSVG/Maximize.tsx}                   |   0
 .../CustomSVG/Minimize.tsx}                   |   0
 .../CustomSVG/Restore.tsx}                    |   0
 .../CustomSVG/Trophy.tsx}                     |   0
 .../ErrorBoundary.tsx}                        |  10 +-
 .../ExportDialog.tsx}                         |   8 +-
 .../FileUpload/FilePicker.tsx}                |   0
 .../FileUpload/UploadFullscreen.tsx}          |   7 +-
 .../FilterComponents/AccountSelection.tsx}    |   6 +-
 .../FilterComponents/AmountFilter.tsx}        |   6 +-
 .../FilterComponents/CardSelection.tsx}       |  18 +-
 .../FilterComponents/CategorySelection.tsx}   |   6 +-
 .../FilterComponents/ClearFilter.tsx}         |   4 +-
 .../FilterComponents/FilterDrawer.tsx}        |   8 +-
 .../FilterComponents/SearchFilter.tsx}        |   2 +-
 .../FilterCreationDialog.tsx}                 |   2 +-
 .../FormFields/AccountSelectorDialog.tsx}     |   6 +-
 .../FormFields/ColorPicker.tsx}               |   0
 .../FormFields/EmailSuggestions.tsx}          |   0
 .../FormFields/FilePicker.tsx}                |   0
 .../FormFields/GradientColorPicker.tsx}       |   0
 .../FormFields/IconPicker.tsx}                |  29 +-
 .../FormFields/InputSuggestions.tsx}          |   0
 .../FormFields/MoneyFormatInput.tsx}          |   2 +-
 .../FormFields/MoneyFormatInputDefault.tsx}   |   2 +-
 .../FormFields/RedirectUrl.tsx}               |   0
 .../FormFields/SchedulePaymentForm.tsx}       |   4 +-
 .../FormFields/TargetChip.tsx}                |   0
 .../FormFields/TargetChipList.tsx}            |   0
 .../FormFields/TargetSelection.tsx}           |  27 +-
 .../GeoLocation/GeoLocationListItem.tsx}      |   4 +-
 .../GeoLocation/GeoLocationMap.tsx}           |   0
 .../GeoLocation/GeoLocationView.tsx}          |   2 +-
 .../Header.jsx => components/Header.tsx}      |  20 +-
 .../ImportDialog.tsx                          |   0
 .../Layout.jsx => components/Layout.tsx}      |  56 ++--
 .../LimitedPremiumListItem.tsx}               |   2 +-
 .../LinearProgress.tsx}                       |   6 +-
 .../ListItemWrapper.tsx}                      |   0
 .../ListItems/BunqMeTabListItem.tsx}          |   2 +-
 .../ListItems/MasterCardActionListItem.tsx}   |   8 +-
 .../ListItems/PaymentListItem.tsx}            |   6 +-
 .../RequestInquiryBatchListItem.tsx}          |   2 +-
 .../ListItems/RequestInquiryListItem.tsx}     |   6 +-
 .../ListItems/RequestResponseListItem.tsx}    |   8 +-
 .../ShareInviteBankTypes/DraftAccess.tsx}     |   0
 .../ShareInviteBankTypes/FullAccess.tsx}      |   0
 .../ShareInviteBankTypes/ShowOnly.tsx}        |   0
 ...eInviteMonetaryAccountInquiryListItem.tsx} |   6 +-
 ...InviteMonetaryAccountResponseListItem.tsx} |   6 +-
 .../MainDialog.tsx}                           |   2 +-
 .../MainSnackbar.tsx}                         |  11 +-
 .../MoneyAmountLabel.tsx}                     |   0
 .../NetworkStatusChecker.tsx}                 |  12 +-
 .../NoteTexts/NoteTextForm.tsx}               |   4 +-
 .../NoteTexts/NoteTextItem.tsx}               |   4 +-
 .../PDFExportHelper/Base64BunqLogo.ts}        |   0
 .../PDFExportHelper/PDFExportHelper.tsx}      |  40 +--
 .../QR/AccountQRCode.tsx}                     |   0
 .../QR/AccountQRFullscreen.tsx}               |  18 +-
 .../QRCode.jsx => components/QR/QRCode.tsx}   |   0
 .../QR/QRSvg.jsx => components/QR/QRSvg.tsx}  |   0
 .../Queue/QueueHeaderIcon.tsx}                |   9 +-
 .../Queue/QueueManager.tsx}                   |  78 +++--
 .../Queue/QueueSidebarListItem.tsx}           |  15 +-
 .../ReactJsonWrapper.tsx}                     |   0
 .../Fields/renderAccountsPicker.tsx}          |   0
 .../ReduxForm/Fields/renderAmountField.tsx}   |   0
 .../Fields/renderColorPickerGradient.tsx}     |   0
 .../Fields/renderDateTimePicker.tsx}          |   6 +-
 .../ReduxForm/Fields/renderTextField.tsx}     |   0
 .../ReduxForm/Validators.ts}                  |   2 +-
 .../Routes.jsx => components/Routes.tsx}      |  70 ++--
 .../Routing/NavLink.tsx}                      |   1 -
 .../Routing/PrivateRoute.tsx}                 |   0
 .../Routing/PublicRoute.tsx}                  |   0
 .../RuleCollectionChecker.tsx}                |  35 +-
 .../SavingsGoals/Helpers.ts}                  |   6 +-
 .../SavingsGoals/SavingsGoalListItem.tsx}     |   6 +-
 .../SavingsGoalListItemWrapper.tsx}           |   2 +-
 .../SavingsGoalSmallListItem.tsx}             |   0
 .../SavingsGoals/SavingsGoalsList.tsx}        |   0
 .../Sidebar.jsx => components/Sidebar.tsx}    |   8 +-
 .../SpeedDial.tsx}                            |   0
 .../SwitchKeysMenu.tsx}                       |   6 +-
 .../TransactionHeader.tsx}                    |   2 +-
 .../TranslationHelpers/Button.tsx}            |   0
 .../TranslationHelpers/MenuItem.tsx}          |   0
 .../TranslationHelpers/Typography.tsx}        |   0
 src/{react/i18n.jsx => components/i18n.tsx}   |  10 +-
 .../react-app.tsx}                            |   4 +-
 src/{env.js => env.ts}                        |   0
 .../Analytics.js => functions/Analytics.ts}   |   4 +-
 .../BunqErrorHandler.ts}                      |  41 ++-
 .../ConnectGetPermissions.ts}                 |   2 +-
 .../Crypto.js => functions/Crypto/Crypto.ts}  |   0
 .../Crypto/CryptoWorkerWrapper.ts}            |   2 +-
 .../Crypto/CustomForge.ts}                    |   0
 .../DataFilters.ts}                           |   2 +-
 .../DefaultImageHandlers.ts}                  |   0
 .../EventStatusTexts.ts}                      |   0
 .../FilterDisabledChecker.ts}                 |   0
 .../IpChecker.js => functions/IpChecker.ts}   |   0
 .../IsDarwin.js => functions/IsDarwin.ts}     |   2 +-
 .../Logger.js => functions/Logger.ts}         |   0
 .../MergeApiObjects.ts}                       |   0
 .../NoteTextTypeParser.ts}                    |   0
 .../NotificationHelper.ts}                    |   0
 .../PhoneLib.js => functions/PhoneLib.ts}     |   0
 .../ScheduleTexts.ts}                         |   0
 .../StatsFormattingTemplates.ts}              |   0
 .../Functions/Utils.js => functions/Utils.ts} |   0
 .../VersionChecker.ts}                        |   0
 .../{context_menu.js => context_menu.ts}      |   0
 src/helpers/{devtools.js => devtools.ts}      |   0
 .../{external_links.js => external_links.ts}  |   0
 src/helpers/{oauth.js => oauth.ts}            |   0
 .../{react_navigate.js => react_navigate.ts}  |   0
 src/helpers/{settings.js => settings.ts}      |   0
 src/helpers/{shortcuts.js => shortcuts.ts}    |   0
 src/helpers/{touchbar.js => touchbar.ts}      |   0
 src/helpers/{tray.js => tray.ts}              |   0
 src/helpers/{window.js => window.ts}          |   0
 ...{i18n-background.js => i18n-background.ts} |   0
 .../README.md                                 |   0
 .../electronSettings.ts}                      |   0
 .../fs.js => importwrappers/fs.ts}            |   0
 .../localforage.ts}                           |   0
 .../os.js => importwrappers/os.ts}            |   0
 .../path.js => importwrappers/path.ts}        |   0
 .../Locales => locales}/Crowdin/.gitkeep      |   0
 src/{react/Locales => locales}/de.json        |   0
 src/{react/Locales => locales}/en.json        |   0
 src/{react/Locales => locales}/es.json        |   0
 src/{react/Locales => locales}/gr.json        |   0
 src/{react/Locales => locales}/it.json        |   0
 src/{react/Locales => locales}/nl.json        |   0
 ..._templates.js => darwin_menu_templates.ts} |   0
 ..._menu_template.js => dev_menu_template.ts} |   0
 ...menu_template.js => edit_menu_template.ts} |   0
 ...menu_template.js => help_menu_template.ts} |   0
 ...menu_template.js => view_menu_template.ts} |   0
 ...nu_template.js => window_menu_template.ts} |   0
 src/misc/consts.ts                            |  14 +
 src/{react/Models => models}/BunqMeTab.ts     |   4 +-
 src/{react/Models => models}/Card.ts          |   4 +-
 .../Models => models}/MasterCardAction.ts     |   4 +-
 .../Models => models}/MonetaryAccount.ts      |   4 +-
 src/{react/Models => models}/Payment.ts       |   4 +-
 .../Models => models}/RequestInquiry.ts       |   4 +-
 .../Models => models}/RequestInquiryBatch.ts  |   4 +-
 .../Models => models}/RequestResponse.ts      |   4 +-
 src/{react/Models => models}/SavingsGoal.ts   |   4 +-
 .../AccountInfo.jsx => pages/AccountInfo.tsx} |  59 ++--
 .../AddAccount.jsx => pages/AddAccount.tsx}   |  18 +-
 .../ApplicationInfo.tsx}                      |  23 +-
 .../BunqMePersonal/BunqMePersonal.tsx}        |   5 +-
 .../BunqMePersonal/LinkPreviewField.tsx}      |   4 +-
 .../BunqMeTab/BunqMeTab.tsx}                  |  11 +-
 .../BunqMeTab/BunqMeTabForm.tsx}              |  22 +-
 .../BunqMeTab/ConfirmationDialog.tsx}         |   4 +-
 .../Cards/CardListItem.tsx}                   |   3 +-
 .../Cards/Cards.jsx => pages/Cards/Cards.tsx} |  29 +-
 .../Cards/CvcCodeListItem.tsx}                |  10 +-
 .../Cards/VirtualAccountNumbersDialog.tsx}    |  10 +-
 .../CategoryDashboard/CategoryDashboard.tsx}  |  30 +-
 .../Connect/BudgetFields.tsx}                 |   8 +-
 .../Connect.jsx => pages/Connect/Connect.tsx} |  48 +--
 .../Connect/ConnectListItem.tsx}              |  12 +-
 .../Connect/ConnectSettingItem.tsx}           |   0
 .../Connect/TimeLimitFields.tsx}              |   0
 .../Contacts/ContactHeader.tsx}               |   4 +-
 .../Contacts/Contacts.tsx}                    |  24 +-
 .../Dashboard/AddMoneyButton.tsx}             |   2 +-
 .../Dashboard/Dashboard.tsx}                  |  16 +-
 .../DebugPage.jsx => pages/DebugPage.tsx}     |   2 +-
 .../Disclaimer.jsx => pages/Disclaimer.tsx}   |   6 +-
 .../Pages/Exports.jsx => pages/Exports.tsx}   |  49 +--
 .../Login/Login.jsx => pages/Login/Login.tsx} |  12 +-
 .../Login/OAuthManagement.tsx}                |  23 +-
 .../Login/SideOptions.tsx}                    |   4 +-
 .../LoginPassword.tsx}                        |   8 +-
 .../MasterCardActionInfo.tsx}                 |  38 ++-
 .../Pages/NotFound.jsx => pages/NotFound.tsx} |   2 +-
 .../Pay/ConfirmationDialog.tsx}               |   2 +-
 .../Pages/Pay/Pay.jsx => pages/Pay/Pay.tsx}   |  46 +--
 .../PaymentInfo.jsx => pages/PaymentInfo.tsx} |  48 +--
 .../PendingPayments/ConfirmationDialog.tsx}   |   0
 .../PendingPayments/PendingPaymentRow.tsx}    |   6 +-
 .../PendingPayments/PendingPayments.tsx}      |  22 +-
 .../Address.jsx => pages/Profile/Address.tsx} |   4 +-
 .../Profile/BillingInfo.tsx}                  |   0
 .../Profile/BusinessInfo.tsx}                 |   4 +-
 .../Profile/NotificationFilters.tsx}          |   6 +-
 .../Profile.jsx => pages/Profile/Profile.tsx} |  27 +-
 .../Profile/ProfileDetailsForm.tsx}           |   8 +-
 .../RequestInquiry/ConfirmationDialog.tsx}    |   2 +-
 .../RequestInquiry/Options/AllowBunqMe.tsx}   |   0
 .../RequestInquiry/Options/MinimumAge.tsx}    |   0
 .../RequestInquiry/RequestInquiry.tsx}        |  29 +-
 .../RequestInquiry/SplitAmountForm.tsx}       |   2 +-
 .../RequestInquiry/SplitAmountItem.tsx}       |   4 +-
 .../RequestInquiry/TotalSplitHelper.ts}       |   0
 .../RequestInquiryInfo.tsx}                   |  46 +--
 .../RequestResponseInfo/AddressForm.tsx}      |   0
 .../RequestResponseInfo.tsx}                  |  61 ++--
 .../RuleDashboard/RuleCollectionItem.tsx}     |   8 +-
 .../RuleDashboard/RuleDashboard.tsx}          |  52 +--
 .../RulePage/NewRuleItemMenu.tsx              |   4 +-
 .../RulePage/RuleCollectionMenu.tsx           |   2 +-
 .../RulePage/RuleCollectionPreview.tsx        |   8 +-
 .../RulePage/RuleCollectionPreviewItem.tsx    |  14 +-
 .../Pages => pages}/RulePage/RuleCreator.tsx  |  16 +-
 .../Pages => pages}/RulePage/RuleItemMenu.tsx |   2 +-
 .../RulePage/RulePage.tsx}                    |  19 +-
 .../RuleTypeItems/AccountRuleItem.tsx         |   6 +-
 .../RuleTypeItems/ItemTypeRuleItem.tsx        |   6 +-
 .../TransactionAmountRuleItem.tsx             |   8 +-
 .../RulePage/RuleTypeItems/ValueRuleItem.tsx  |   4 +-
 .../SavingsGoalPage/SavingsGoalForm.tsx}      |  14 +-
 .../SavingsGoalPage/SavingsGoalPage.tsx}      |  21 +-
 .../renderAmountFieldCustom.tsx}              |   8 +-
 .../SavingsGoals/SavingsGoals.tsx}            |  26 +-
 .../ScheduledPaymentItem.tsx}                 |  12 +-
 .../ScheduledPayments/ScheduledPayments.tsx}  |  16 +-
 .../ScheduledPaymentsEditDialog.tsx}          |  10 +-
 .../Settings/EditPasswordForm.tsx}            |   6 +-
 .../Settings/Settings.tsx}                    |  70 ++--
 .../Chart/PieChart/CategoryCountPieChart.tsx} |   1 +
 .../PieChart/CategoryTransactionPieChart.tsx} |   3 +-
 .../Chart/PieChart/EventCountPieChart.tsx}    |   1 +
 .../PieChart/EventSplitCountPieChart.tsx}     |   1 +
 .../EventSplitTransactionPieChart.tsx}        |   3 +-
 .../PieChart/EventTransactionPieChart.tsx}    |   3 +-
 .../Timeline/CategoryCountHistoryChart.tsx}   |   2 +-
 .../CategoryTransactionHistoryChart.tsx}      |   2 +-
 .../Chart/Timeline/EventTypeHistoryChart.tsx} |   2 +-
 .../Timeline/EventTypeSplitHistoryChart.tsx}  |   2 +-
 ...EventTypeSplitTransactionHistoryChart.tsx} |   2 +-
 .../EventTypeTransactionHistoryChart.tsx}     |   2 +-
 .../Stats/ChartTitle.tsx}                     |   0
 .../Colors.jsx => pages/Stats/Colors.tsx}     |   0
 .../Stats/EventCountSection.tsx}              |   0
 .../Stats/EventCountSidebarSection.tsx}       |   4 +-
 .../Stats/EventHistorySection.tsx}            |   0
 .../Stats/Stats.jsx => pages/Stats/Stats.tsx} |  14 +-
 .../SwitchApiKeys.tsx}                        |   4 +-
 src/react/Actions/accounts.js                 | 294 -----------------
 src/react/Actions/application.js              |  41 ---
 src/react/Actions/bunq_me_tab.js              |  51 ---
 src/react/Actions/bunq_me_tabs.js             |  76 -----
 src/react/Actions/card_cvc2.js                |  69 ----
 src/react/Actions/cards.js                    |  71 ----
 src/react/Actions/categories.js               |  71 ----
 src/react/Actions/category_rules.ts           |  32 --
 src/react/Actions/contacts.js                 | 307 ------------------
 src/react/Actions/export_new.js               |  37 ---
 src/react/Actions/exports.js                  |  52 ---
 src/react/Actions/snackbar.js                 |  14 -
 src/react/Reducers/account_id_filter.js       |  47 ---
 src/react/Reducers/accounts.js                | 144 --------
 src/react/Reducers/amount_filter.js           |  29 --
 src/react/Reducers/application.js             |  45 ---
 src/react/Reducers/bunq_me_tab.js             |  20 --
 src/react/Reducers/bunq_me_tab_filter.js      |  28 --
 src/react/Reducers/bunq_me_tabs.js            |  93 ------
 src/react/Reducers/card_cvc2.js               |  40 ---
 src/react/Reducers/card_id_filter.js          |  47 ---
 src/react/Reducers/cards.js                   |  65 ----
 src/react/Reducers/category_filter.js         |  42 ---
 src/react/Reducers/category_rules.ts          | 127 --------
 src/react/Reducers/contacts.js                | 152 ---------
 src/react/Reducers/date_filter.js             |  36 --
 src/react/Reducers/export_new.js              |  17 -
 src/react/Reducers/exports.js                 |  39 ---
 src/react/Reducers/snackbar.js                |  24 --
 src/react/Store.jsx                           |  19 --
 .../CountryCodes.json                         |   0
 .../StaticData => staticdata}/Icons.json      |   0
 src/store/accountIdFilter/index.ts            |  50 +++
 src/store/accounts/index.ts                   | 160 +++++++++
 src/store/accounts/thunks.ts                  | 227 +++++++++++++
 src/store/amountFilter/index.ts               |  34 ++
 src/store/application/index.ts                |  52 +++
 src/store/bunqMeTab/index.ts                  |  24 ++
 src/store/bunqMeTab/thunks.ts                 |  60 ++++
 src/store/bunqMeTabFilter/index.ts            |  38 +++
 src/store/bunqMeTabs/index.ts                 | 130 ++++++++
 src/store/bunqMeTabs/thunks.ts                |  60 ++++
 src/store/cardCvc2/index.ts                   |  63 ++++
 src/store/cardCvc2/thunks.ts                  |  50 +++
 src/store/cardIdFilter/index.ts               |  56 ++++
 src/store/cards/index.ts                      |  89 +++++
 src/store/cards/thunks.ts                     |  55 ++++
 .../categories/index.ts}                      | 213 +++++++-----
 src/store/categoryFilter/index.ts             |  45 +++
 src/store/categoryRules/index.ts              | 122 +++++++
 src/store/contacts/index.ts                   | 188 +++++++++++
 src/store/contacts/thunks.ts                  | 272 ++++++++++++++++
 src/store/dateFilter/index.ts                 |  42 +++
 src/store/exportNew/index.ts                  |  28 ++
 src/store/exportNew/thunks.ts                 |  34 ++
 src/store/exports/index.ts                    |  59 ++++
 src/store/exports/thunks.ts                   |  33 ++
 src/store/index.ts                            | 160 +++++++++
 src/store/snackbar/index.ts                   |  39 +++
 .../DarkTheme.jsx => themes/DarkTheme.ts}     |   0
 .../DefaultTheme.ts}                          |   0
 src/types/Category.ts                         |   9 +
 src/{react/Types => types}/Event.ts           |   0
 src/{react/Types => types}/RuleCollection.ts  |   4 +-
 .../Types => types}/Rules/AccountRule.ts      |   0
 src/{react/Types => types}/Rules/Rule.ts      |   0
 .../Rules/TransactionAmountRule.ts            |   0
 src/{react/Types => types}/Rules/TypeRule.ts  |   0
 src/{react/Types => types}/Rules/ValueRule.ts |   0
 src/{react/Types => types}/Types.ts           |   2 +-
 .../crypto.worker.js                          |   2 +-
 .../rule_collection_check.worker.js           |   2 +-
 .../WebWorkers => webworkers}/stats.worker.js |  14 +-
 tasks/build_app.js                            |   4 +-
 tasks/bundle.js                               |   2 +
 tasks/generate_icons.js                       |   2 +-
 tasks/update_translations.js                  |   4 +-
 tsconfig.json                                 |  28 +-
 webpack.config.js                             |   4 +-
 webpacktools.js                               |  66 ++++
 yarn.lock                                     | 189 ++++++++++-
 428 files changed, 4061 insertions(+), 3482 deletions(-)
 delete mode 100644 .babelrc
 create mode 100644 babel.config.js
 rename src/{react => }/Actions/filters.js (100%)
 rename src/{react => }/Actions/master_card_action_info.js (93%)
 rename src/{react => }/Actions/master_card_actions.js (93%)
 rename src/{react => }/Actions/modal.js (100%)
 rename src/{react => }/Actions/note_texts.js (98%)
 rename src/{react => }/Actions/oauth.js (100%)
 rename src/{react => }/Actions/options.js (100%)
 rename src/{react => }/Actions/pagination.js (100%)
 rename src/{react => }/Actions/pay.js (90%)
 rename src/{react => }/Actions/payment_info.js (93%)
 rename src/{react => }/Actions/payments.js (93%)
 rename src/{react => }/Actions/pending_payments.js (100%)
 rename src/{react => }/Actions/queue.js (100%)
 rename src/{react => }/Actions/registration.js (84%)
 rename src/{react => }/Actions/request_inquiries.js (95%)
 rename src/{react => }/Actions/request_inquiry.js (82%)
 rename src/{react => }/Actions/request_inquiry_batches.js (95%)
 rename src/{react => }/Actions/request_inquiry_info.js (93%)
 rename src/{react => }/Actions/request_response.js (79%)
 rename src/{react => }/Actions/request_response_info.js (93%)
 rename src/{react => }/Actions/request_responses.js (95%)
 rename src/{react => }/Actions/savings_goals.js (100%)
 rename src/{react => }/Actions/scheduled_payments.js (97%)
 rename src/{react => }/Actions/share_invite_monetary_account_inquiries.js (97%)
 rename src/{react => }/Actions/share_invite_monetary_account_inquiry.js (89%)
 rename src/{react => }/Actions/share_invite_monetary_account_response.js (85%)
 rename src/{react => }/Actions/share_invite_monetary_account_responses.js (97%)
 rename src/{react => }/Actions/sidebar.js (100%)
 rename src/{react => }/Actions/user.js (89%)
 rename src/{react => }/Actions/users.js (94%)
 rename src/{react => }/Reducers/general_filter.js (100%)
 rename src/{react => }/Reducers/index.js (98%)
 rename src/{react => }/Reducers/master_card_action_info.js (100%)
 rename src/{react => }/Reducers/master_card_actions.js (90%)
 rename src/{react => }/Reducers/modal.js (100%)
 rename src/{react => }/Reducers/note_texts.js (100%)
 rename src/{react => }/Reducers/oauth.js (98%)
 rename src/{react => }/Reducers/options.js (99%)
 rename src/{react => }/Reducers/pagination.js (100%)
 rename src/{react => }/Reducers/pay.js (100%)
 rename src/{react => }/Reducers/payment_filter.js (100%)
 rename src/{react => }/Reducers/payment_info.js (100%)
 rename src/{react => }/Reducers/payments.js (92%)
 rename src/{react => }/Reducers/pending_payments.js (95%)
 rename src/{react => }/Reducers/queue.js (100%)
 rename src/{react => }/Reducers/registration.js (100%)
 rename src/{react => }/Reducers/request_filter.js (100%)
 rename src/{react => }/Reducers/request_inquiries.js (93%)
 rename src/{react => }/Reducers/request_inquiry.js (100%)
 rename src/{react => }/Reducers/request_inquiry_batches.js (93%)
 rename src/{react => }/Reducers/request_inquiry_info.js (100%)
 rename src/{react => }/Reducers/request_response.js (100%)
 rename src/{react => }/Reducers/request_response_info.js (100%)
 rename src/{react => }/Reducers/request_responses.js (93%)
 rename src/{react => }/Reducers/savings_goals.js (96%)
 rename src/{react => }/Reducers/scheduled_payments.js (100%)
 rename src/{react => }/Reducers/search_filter.js (100%)
 rename src/{react => }/Reducers/share_invite_monetary_account_inquiries.js (93%)
 rename src/{react => }/Reducers/share_invite_monetary_account_inquiry.js (100%)
 rename src/{react => }/Reducers/share_invite_monetary_account_responses.js (93%)
 rename src/{react => }/Reducers/sidebar.js (100%)
 rename src/{react => }/Reducers/user.js (100%)
 rename src/{react => }/Reducers/users.js (100%)
 delete mode 100644 src/app.js
 create mode 100644 src/app.ts
 rename src/{background.js => background.ts} (91%)
 rename src/{react/Components/AccountCard.jsx => components/AccountCard.tsx} (91%)
 rename src/{react/Components/AccountList/AccountAvatarCircularProgress.jsx => components/AccountList/AccountAvatarCircularProgress.tsx} (93%)
 rename src/{react/Components/AccountList/AccountList.jsx => components/AccountList/AccountList.tsx} (87%)
 rename src/{react/Components/AccountList/AccountListItem.jsx => components/AccountList/AccountListItem.tsx} (88%)
 rename src/{react/Components/AccountList/AccountListItemChip.jsx => components/AccountList/AccountListItemChip.tsx} (93%)
 rename src/{react/Components/AccountList/AddAccount.jsx => components/AccountList/AddAccount.tsx} (94%)
 rename src/{react/Components/AliasList.jsx => components/AliasList.tsx} (86%)
 rename src/{react/App.jsx => components/App.tsx} (70%)
 rename src/{react/Components/AttachmentImage/AttachmentImage.jsx => components/AttachmentImage/AttachmentImage.tsx} (89%)
 rename src/{react/Components/AttachmentImage/LazyAttachmentImage.jsx => components/AttachmentImage/LazyAttachmentImage.tsx} (92%)
 rename src/{react => components}/BunqDesktopClient.ts (98%)
 rename src/{react/Components/BunqMeTabList.jsx => components/BunqMeTabList.tsx} (92%)
 rename src/{react/Components/Categories/CategoryChip.jsx => components/Categories/CategoryChip.tsx} (97%)
 rename src/{react/Components/Categories/CategoryChips.jsx => components/Categories/CategoryChips.tsx} (79%)
 rename src/{react/Components/Categories/CategoryEditor.jsx => components/Categories/CategoryEditor.tsx} (89%)
 rename src/{react/Components/Categories/CategoryHelper.js => components/Categories/CategoryHelper.ts} (100%)
 rename src/{react/Components/Categories/CategoryIcon.jsx => components/Categories/CategoryIcon.tsx} (100%)
 rename src/{react/Components/Categories/CategoryIcons.jsx => components/Categories/CategoryIcons.tsx} (100%)
 rename src/{react/Components/Categories/CategorySelector.jsx => components/Categories/CategorySelector.tsx} (81%)
 rename src/{react/Components/Categories/CategorySelectorDialog.jsx => components/Categories/CategorySelectorDialog.tsx} (87%)
 rename src/{react/Components/Categories/PrioritySorter.js => components/Categories/PrioritySorter.ts} (100%)
 rename src/{react/Components/CodeSplitting/ComponentLoader.jsx => components/CodeSplitting/ComponentLoader.tsx} (100%)
 rename src/{react/Components/CodeSplitting/Loading.jsx => components/CodeSplitting/Loading.tsx} (81%)
 rename src/{react/Components/CombinedList/CombinedList.jsx => components/CombinedList/CombinedList.tsx} (96%)
 rename src/{react/Components/CombinedList/EventData.jsx => components/CombinedList/EventData.tsx} (98%)
 rename src/{react/Components/CombinedList/ListControls.jsx => components/CombinedList/ListControls.tsx} (100%)
 rename src/{react/Components/CombinedList/MapperFunctions.jsx => components/CombinedList/MapperFunctions.tsx} (99%)
 rename src/{react/Components/CopyToClipboardWrap.jsx => components/CopyToClipboardWrap.tsx} (100%)
 rename src/{react/Components/CustomIcon.jsx => components/CustomIcon.tsx} (100%)
 rename src/{react/Components/CustomSVG/FileDownload.jsx => components/CustomSVG/FileDownload.tsx} (100%)
 rename src/{react/Components/CustomSVG/FileUpload.jsx => components/CustomSVG/FileUpload.tsx} (100%)
 rename src/{react/Components/CustomSVG/Maximize.jsx => components/CustomSVG/Maximize.tsx} (100%)
 rename src/{react/Components/CustomSVG/Minimize.jsx => components/CustomSVG/Minimize.tsx} (100%)
 rename src/{react/Components/CustomSVG/Restore.jsx => components/CustomSVG/Restore.tsx} (100%)
 rename src/{react/Components/CustomSVG/Trophy.jsx => components/CustomSVG/Trophy.tsx} (100%)
 rename src/{react/Components/ErrorBoundary.jsx => components/ErrorBoundary.tsx} (87%)
 rename src/{react/Components/ExportDialog.jsx => components/ExportDialog.tsx} (92%)
 rename src/{react/Components/FileUpload/FilePicker.jsx => components/FileUpload/FilePicker.tsx} (100%)
 rename src/{react/Components/FileUpload/UploadFullscreen.jsx => components/FileUpload/UploadFullscreen.tsx} (95%)
 rename src/{react/Components/FilterComponents/AccountSelection.jsx => components/FilterComponents/AccountSelection.tsx} (98%)
 rename src/{react/Components/FilterComponents/AmountFilter.jsx => components/FilterComponents/AmountFilter.tsx} (95%)
 rename src/{react/Components/FilterComponents/CardSelection.jsx => components/FilterComponents/CardSelection.tsx} (94%)
 rename src/{react/Components/FilterComponents/CategorySelection.jsx => components/FilterComponents/CategorySelection.tsx} (98%)
 rename src/{react/Components/FilterComponents/ClearFilter.jsx => components/FilterComponents/ClearFilter.tsx} (95%)
 rename src/{react/Components/FilterComponents/FilterDrawer.jsx => components/FilterComponents/FilterDrawer.tsx} (99%)
 rename src/{react/Components/FilterComponents/SearchFilter.jsx => components/FilterComponents/SearchFilter.tsx} (95%)
 rename src/{react/Components/FilterCreationDialog.jsx => components/FilterCreationDialog.tsx} (98%)
 rename src/{react/Components/FormFields/AccountSelectorDialog.jsx => components/FormFields/AccountSelectorDialog.tsx} (96%)
 rename src/{react/Components/FormFields/ColorPicker.jsx => components/FormFields/ColorPicker.tsx} (100%)
 rename src/{react/Components/FormFields/EmailSuggestions.jsx => components/FormFields/EmailSuggestions.tsx} (100%)
 rename src/{react/Components/FormFields/FilePicker.jsx => components/FormFields/FilePicker.tsx} (100%)
 rename src/{react/Components/FormFields/GradientColorPicker.jsx => components/FormFields/GradientColorPicker.tsx} (100%)
 rename src/{react/Components/FormFields/IconPicker.jsx => components/FormFields/IconPicker.tsx} (90%)
 rename src/{react/Components/FormFields/InputSuggestions.jsx => components/FormFields/InputSuggestions.tsx} (100%)
 rename src/{react/Components/FormFields/MoneyFormatInput.jsx => components/FormFields/MoneyFormatInput.tsx} (97%)
 rename src/{react/Components/FormFields/MoneyFormatInputDefault.jsx => components/FormFields/MoneyFormatInputDefault.tsx} (97%)
 rename src/{react/Components/FormFields/RedirectUrl.jsx => components/FormFields/RedirectUrl.tsx} (100%)
 rename src/{react/Components/FormFields/SchedulePaymentForm.jsx => components/FormFields/SchedulePaymentForm.tsx} (97%)
 rename src/{react/Components/FormFields/TargetChip.jsx => components/FormFields/TargetChip.tsx} (100%)
 rename src/{react/Components/FormFields/TargetChipList.jsx => components/FormFields/TargetChipList.tsx} (100%)
 rename src/{react/Components/FormFields/TargetSelection.jsx => components/FormFields/TargetSelection.tsx} (95%)
 rename src/{react/Components/GeoLocation/GeoLocationListItem.jsx => components/GeoLocation/GeoLocationListItem.tsx} (94%)
 rename src/{react/Components/GeoLocation/GeoLocationMap.jsx => components/GeoLocation/GeoLocationMap.tsx} (100%)
 rename src/{react/Components/GeoLocation/GeoLocationView.jsx => components/GeoLocation/GeoLocationView.tsx} (95%)
 rename src/{react/Components/Header.jsx => components/Header.tsx} (95%)
 rename src/{react/Components => components}/ImportDialog.tsx (100%)
 rename src/{react/Components/Layout.jsx => components/Layout.tsx} (89%)
 rename src/{react/Components/LimitedPremiumListItem.jsx => components/LimitedPremiumListItem.tsx} (97%)
 rename src/{react/Components/LinearProgress.jsx => components/LinearProgress.tsx} (90%)
 rename src/{react/Components/ListItemWrapper.jsx => components/ListItemWrapper.tsx} (100%)
 rename src/{react/Components/ListItems/BunqMeTabListItem.jsx => components/ListItems/BunqMeTabListItem.tsx} (99%)
 rename src/{react/Components/ListItems/MasterCardActionListItem.jsx => components/ListItems/MasterCardActionListItem.tsx} (92%)
 rename src/{react/Components/ListItems/PaymentListItem.jsx => components/ListItems/PaymentListItem.tsx} (96%)
 rename src/{react/Components/ListItems/RequestInquiryBatchListItem.jsx => components/ListItems/RequestInquiryBatchListItem.tsx} (99%)
 rename src/{react/Components/ListItems/RequestInquiryListItem.jsx => components/ListItems/RequestInquiryListItem.tsx} (94%)
 rename src/{react/Components/ListItems/RequestResponseListItem.jsx => components/ListItems/RequestResponseListItem.tsx} (92%)
 rename src/{react/Components/ListItems/ShareInviteBankTypes/DraftAccess.jsx => components/ListItems/ShareInviteBankTypes/DraftAccess.tsx} (100%)
 rename src/{react/Components/ListItems/ShareInviteBankTypes/FullAccess.jsx => components/ListItems/ShareInviteBankTypes/FullAccess.tsx} (100%)
 rename src/{react/Components/ListItems/ShareInviteBankTypes/ShowOnly.jsx => components/ListItems/ShareInviteBankTypes/ShowOnly.tsx} (100%)
 rename src/{react/Components/ListItems/ShareInviteMonetaryAccountInquiryListItem.jsx => components/ListItems/ShareInviteMonetaryAccountInquiryListItem.tsx} (96%)
 rename src/{react/Components/ListItems/ShareInviteMonetaryAccountResponseListItem.jsx => components/ListItems/ShareInviteMonetaryAccountResponseListItem.tsx} (97%)
 rename src/{react/Components/MainDialog.jsx => components/MainDialog.tsx} (97%)
 rename src/{react/Components/MainSnackbar.jsx => components/MainSnackbar.tsx} (86%)
 rename src/{react/Components/MoneyAmountLabel.jsx => components/MoneyAmountLabel.tsx} (100%)
 rename src/{react/Components/NetworkStatusChecker.jsx => components/NetworkStatusChecker.tsx} (89%)
 rename src/{react/Components/NoteTexts/NoteTextForm.jsx => components/NoteTexts/NoteTextForm.tsx} (98%)
 rename src/{react/Components/NoteTexts/NoteTextItem.jsx => components/NoteTexts/NoteTextItem.tsx} (95%)
 rename src/{react/Components/PDFExportHelper/Base64BunqLogo.js => components/PDFExportHelper/Base64BunqLogo.ts} (100%)
 rename src/{react/Components/PDFExportHelper/PDFExportHelper.jsx => components/PDFExportHelper/PDFExportHelper.tsx} (87%)
 rename src/{react/Components/QR/AccountQRCode.jsx => components/QR/AccountQRCode.tsx} (100%)
 rename src/{react/Components/QR/AccountQRFullscreen.jsx => components/QR/AccountQRFullscreen.tsx} (93%)
 rename src/{react/Components/QR/QRCode.jsx => components/QR/QRCode.tsx} (100%)
 rename src/{react/Components/QR/QRSvg.jsx => components/QR/QRSvg.tsx} (100%)
 rename src/{react/Components/Queue/QueueHeaderIcon.jsx => components/Queue/QueueHeaderIcon.tsx} (91%)
 rename src/{react/Components/Queue/QueueManager.jsx => components/Queue/QueueManager.tsx} (93%)
 rename src/{react/Components/Queue/QueueSidebarListItem.jsx => components/Queue/QueueSidebarListItem.tsx} (92%)
 rename src/{react/Components/ReactJsonWrapper.jsx => components/ReactJsonWrapper.tsx} (100%)
 rename src/{react/Components/ReduxForm/Fields/renderAccountsPicker.jsx => components/ReduxForm/Fields/renderAccountsPicker.tsx} (100%)
 rename src/{react/Components/ReduxForm/Fields/renderAmountField.jsx => components/ReduxForm/Fields/renderAmountField.tsx} (100%)
 rename src/{react/Components/ReduxForm/Fields/renderColorPickerGradient.jsx => components/ReduxForm/Fields/renderColorPickerGradient.tsx} (100%)
 rename src/{react/Components/ReduxForm/Fields/renderDateTimePicker.jsx => components/ReduxForm/Fields/renderDateTimePicker.tsx} (92%)
 rename src/{react/Components/ReduxForm/Fields/renderTextField.jsx => components/ReduxForm/Fields/renderTextField.tsx} (100%)
 rename src/{react/Components/ReduxForm/Validators.js => components/ReduxForm/Validators.ts} (96%)
 rename src/{react/Routes.jsx => components/Routes.tsx} (80%)
 rename src/{react/Components/Routing/NavLink.jsx => components/Routing/NavLink.tsx} (91%)
 rename src/{react/Components/Routing/PrivateRoute.jsx => components/Routing/PrivateRoute.tsx} (100%)
 rename src/{react/Components/Routing/PublicRoute.jsx => components/Routing/PublicRoute.tsx} (100%)
 rename src/{react/Components/RuleCollectionChecker.jsx => components/RuleCollectionChecker.tsx} (78%)
 rename src/{react/Components/SavingsGoals/Helpers.js => components/SavingsGoals/Helpers.ts} (80%)
 rename src/{react/Components/SavingsGoals/SavingsGoalListItem.jsx => components/SavingsGoals/SavingsGoalListItem.tsx} (97%)
 rename src/{react/Components/SavingsGoals/SavingsGoalListItemWrapper.jsx => components/SavingsGoals/SavingsGoalListItemWrapper.tsx} (97%)
 rename src/{react/Components/SavingsGoals/SavingsGoalSmallListItem.jsx => components/SavingsGoals/SavingsGoalSmallListItem.tsx} (100%)
 rename src/{react/Components/SavingsGoals/SavingsGoalsList.jsx => components/SavingsGoals/SavingsGoalsList.tsx} (100%)
 rename src/{react/Components/Sidebar.jsx => components/Sidebar.tsx} (98%)
 rename src/{react/Components/SpeedDial.jsx => components/SpeedDial.tsx} (100%)
 rename src/{react/Components/SwitchKeysMenu.jsx => components/SwitchKeysMenu.tsx} (98%)
 rename src/{react/Components/TransactionHeader.jsx => components/TransactionHeader.tsx} (99%)
 rename src/{react/Components/TranslationHelpers/Button.jsx => components/TranslationHelpers/Button.tsx} (100%)
 rename src/{react/Components/TranslationHelpers/MenuItem.jsx => components/TranslationHelpers/MenuItem.tsx} (100%)
 rename src/{react/Components/TranslationHelpers/Typography.jsx => components/TranslationHelpers/Typography.tsx} (100%)
 rename src/{react/i18n.jsx => components/i18n.tsx} (89%)
 rename src/{react/react-app.jsx => components/react-app.tsx} (89%)
 rename src/{env.js => env.ts} (100%)
 rename src/{react/Functions/Analytics.js => functions/Analytics.ts} (93%)
 rename src/{react/Functions/BunqErrorHandler.js => functions/BunqErrorHandler.ts} (66%)
 rename src/{react/Functions/ConnectGetPermissions.js => functions/ConnectGetPermissions.ts} (98%)
 rename src/{react/Functions/Crypto/Crypto.js => functions/Crypto/Crypto.ts} (100%)
 rename src/{react/Functions/Crypto/CryptoWorkerWrapper.js => functions/Crypto/CryptoWorkerWrapper.ts} (97%)
 rename src/{react/Functions/Crypto/CustomForge.js => functions/Crypto/CustomForge.ts} (100%)
 rename src/{react/Functions/DataFilters.js => functions/DataFilters.ts} (99%)
 rename src/{react/Functions/DefaultImageHandlers.js => functions/DefaultImageHandlers.ts} (100%)
 rename src/{react/Functions/EventStatusTexts.js => functions/EventStatusTexts.ts} (100%)
 rename src/{react/Functions/FilterDisabledChecker.js => functions/FilterDisabledChecker.ts} (100%)
 rename src/{react/Functions/IpChecker.js => functions/IpChecker.ts} (100%)
 rename src/{react/Functions/IsDarwin.js => functions/IsDarwin.ts} (62%)
 rename src/{react/Functions/Logger.js => functions/Logger.ts} (100%)
 rename src/{react/Functions/MergeApiObjects.js => functions/MergeApiObjects.ts} (100%)
 rename src/{react/Functions/NoteTextTypeParser.js => functions/NoteTextTypeParser.ts} (100%)
 rename src/{react/Functions/NotificationHelper.js => functions/NotificationHelper.ts} (100%)
 rename src/{react/Functions/PhoneLib.js => functions/PhoneLib.ts} (100%)
 rename src/{react/Functions/ScheduleTexts.js => functions/ScheduleTexts.ts} (100%)
 rename src/{react/Functions/StatsFormattingTemplates.js => functions/StatsFormattingTemplates.ts} (100%)
 rename src/{react/Functions/Utils.js => functions/Utils.ts} (100%)
 rename src/{react/Functions/VersionChecker.js => functions/VersionChecker.ts} (100%)
 rename src/helpers/{context_menu.js => context_menu.ts} (100%)
 rename src/helpers/{devtools.js => devtools.ts} (100%)
 rename src/helpers/{external_links.js => external_links.ts} (100%)
 rename src/helpers/{oauth.js => oauth.ts} (100%)
 rename src/helpers/{react_navigate.js => react_navigate.ts} (100%)
 rename src/helpers/{settings.js => settings.ts} (100%)
 rename src/helpers/{shortcuts.js => shortcuts.ts} (100%)
 rename src/helpers/{touchbar.js => touchbar.ts} (100%)
 rename src/helpers/{tray.js => tray.ts} (100%)
 rename src/helpers/{window.js => window.ts} (100%)
 rename src/{i18n-background.js => i18n-background.ts} (100%)
 rename src/{react/ImportWrappers => importwrappers}/README.md (100%)
 rename src/{react/ImportWrappers/electronSettings.js => importwrappers/electronSettings.ts} (100%)
 rename src/{react/ImportWrappers/fs.js => importwrappers/fs.ts} (100%)
 rename src/{react/ImportWrappers/localforage.js => importwrappers/localforage.ts} (100%)
 rename src/{react/ImportWrappers/os.js => importwrappers/os.ts} (100%)
 rename src/{react/ImportWrappers/path.js => importwrappers/path.ts} (100%)
 rename src/{react/Locales => locales}/Crowdin/.gitkeep (100%)
 rename src/{react/Locales => locales}/de.json (100%)
 rename src/{react/Locales => locales}/en.json (100%)
 rename src/{react/Locales => locales}/es.json (100%)
 rename src/{react/Locales => locales}/gr.json (100%)
 rename src/{react/Locales => locales}/it.json (100%)
 rename src/{react/Locales => locales}/nl.json (100%)
 rename src/menu/{darwin_menu_templates.js => darwin_menu_templates.ts} (100%)
 rename src/menu/{dev_menu_template.js => dev_menu_template.ts} (100%)
 rename src/menu/{edit_menu_template.js => edit_menu_template.ts} (100%)
 rename src/menu/{help_menu_template.js => help_menu_template.ts} (100%)
 rename src/menu/{view_menu_template.js => view_menu_template.ts} (100%)
 rename src/menu/{window_menu_template.js => window_menu_template.ts} (100%)
 create mode 100644 src/misc/consts.ts
 rename src/{react/Models => models}/BunqMeTab.ts (97%)
 rename src/{react/Models => models}/Card.ts (98%)
 rename src/{react/Models => models}/MasterCardAction.ts (98%)
 rename src/{react/Models => models}/MonetaryAccount.ts (96%)
 rename src/{react/Models => models}/Payment.ts (98%)
 rename src/{react/Models => models}/RequestInquiry.ts (98%)
 rename src/{react/Models => models}/RequestInquiryBatch.ts (96%)
 rename src/{react/Models => models}/RequestResponse.ts (98%)
 rename src/{react/Models => models}/SavingsGoal.ts (97%)
 rename src/{react/Pages/AccountInfo.jsx => pages/AccountInfo.tsx} (93%)
 rename src/{react/Pages/AddAccount.jsx => pages/AddAccount.tsx} (94%)
 rename src/{react/Pages/ApplicationInfo.jsx => pages/ApplicationInfo.tsx} (91%)
 rename src/{react/Pages/BunqMePersonal/BunqMePersonal.jsx => pages/BunqMePersonal/BunqMePersonal.tsx} (98%)
 rename src/{react/Pages/BunqMePersonal/LinkPreviewField.jsx => pages/BunqMePersonal/LinkPreviewField.tsx} (95%)
 rename src/{react/Pages/BunqMeTab/BunqMeTab.jsx => pages/BunqMeTab/BunqMeTab.tsx} (93%)
 rename src/{react/Pages/BunqMeTab/BunqMeTabForm.jsx => pages/BunqMeTab/BunqMeTabForm.tsx} (91%)
 rename src/{react/Pages/BunqMeTab/ConfirmationDialog.jsx => pages/BunqMeTab/ConfirmationDialog.tsx} (93%)
 rename src/{react/Pages/Cards/CardListItem.jsx => pages/Cards/CardListItem.tsx} (94%)
 rename src/{react/Pages/Cards/Cards.jsx => pages/Cards/Cards.tsx} (96%)
 rename src/{react/Pages/Cards/CvcCodeListItem.jsx => pages/Cards/CvcCodeListItem.tsx} (93%)
 rename src/{react/Pages/Cards/VirtualAccountNumbersDialog.jsx => pages/Cards/VirtualAccountNumbersDialog.tsx} (92%)
 rename src/{react/Pages/CategoryDashboard/CategoryDashboard.jsx => pages/CategoryDashboard/CategoryDashboard.tsx} (88%)
 rename src/{react/Pages/Connect/BudgetFields.jsx => pages/Connect/BudgetFields.tsx} (92%)
 rename src/{react/Pages/Connect/Connect.jsx => pages/Connect/Connect.tsx} (94%)
 rename src/{react/Pages/Connect/ConnectListItem.jsx => pages/Connect/ConnectListItem.tsx} (95%)
 rename src/{react/Pages/Connect/ConnectSettingItem.jsx => pages/Connect/ConnectSettingItem.tsx} (100%)
 rename src/{react/Pages/Connect/TimeLimitFields.jsx => pages/Connect/TimeLimitFields.tsx} (100%)
 rename src/{react/Pages/Contacts/ContactHeader.jsx => pages/Contacts/ContactHeader.tsx} (96%)
 rename src/{react/Pages/Contacts/Contacts.jsx => pages/Contacts/Contacts.tsx} (92%)
 rename src/{react/Pages/Dashboard/AddMoneyButton.jsx => pages/Dashboard/AddMoneyButton.tsx} (97%)
 rename src/{react/Pages/Dashboard/Dashboard.jsx => pages/Dashboard/Dashboard.tsx} (94%)
 rename src/{react/Pages/DebugPage.jsx => pages/DebugPage.tsx} (96%)
 rename src/{react/Pages/Disclaimer.jsx => pages/Disclaimer.tsx} (96%)
 rename src/{react/Pages/Exports.jsx => pages/Exports.tsx} (95%)
 rename src/{react/Pages/Login/Login.jsx => pages/Login/Login.tsx} (98%)
 rename src/{react/Pages/Login/OAuthManagement.jsx => pages/Login/OAuthManagement.tsx} (95%)
 rename src/{react/Pages/Login/SideOptions.jsx => pages/Login/SideOptions.tsx} (96%)
 rename src/{react/Pages/LoginPassword.jsx => pages/LoginPassword.tsx} (98%)
 rename src/{react/Pages/MasterCardActionInfo.jsx => pages/MasterCardActionInfo.tsx} (91%)
 rename src/{react/Pages/NotFound.jsx => pages/NotFound.tsx} (89%)
 rename src/{react/Pages/Pay/ConfirmationDialog.jsx => pages/Pay/ConfirmationDialog.tsx} (98%)
 rename src/{react/Pages/Pay/Pay.jsx => pages/Pay/Pay.tsx} (96%)
 rename src/{react/Pages/PaymentInfo.jsx => pages/PaymentInfo.tsx} (89%)
 rename src/{react/Pages/PendingPayments/ConfirmationDialog.jsx => pages/PendingPayments/ConfirmationDialog.tsx} (100%)
 rename src/{react/Pages/PendingPayments/PendingPaymentRow.jsx => pages/PendingPayments/PendingPaymentRow.tsx} (92%)
 rename src/{react/Pages/PendingPayments/PendingPayments.jsx => pages/PendingPayments/PendingPayments.tsx} (96%)
 rename src/{react/Pages/Profile/Address.jsx => pages/Profile/Address.tsx} (93%)
 rename src/{react/Pages/Profile/BillingInfo.jsx => pages/Profile/BillingInfo.tsx} (100%)
 rename src/{react/Pages/Profile/BusinessInfo.jsx => pages/Profile/BusinessInfo.tsx} (96%)
 rename src/{react/Pages/Profile/NotificationFilters.jsx => pages/Profile/NotificationFilters.tsx} (98%)
 rename src/{react/Pages/Profile/Profile.jsx => pages/Profile/Profile.tsx} (94%)
 rename src/{react/Pages/Profile/ProfileDetailsForm.jsx => pages/Profile/ProfileDetailsForm.tsx} (85%)
 rename src/{react/Pages/RequestInquiry/ConfirmationDialog.jsx => pages/RequestInquiry/ConfirmationDialog.tsx} (98%)
 rename src/{react/Pages/RequestInquiry/Options/AllowBunqMe.jsx => pages/RequestInquiry/Options/AllowBunqMe.tsx} (100%)
 rename src/{react/Pages/RequestInquiry/Options/MinimumAge.jsx => pages/RequestInquiry/Options/MinimumAge.tsx} (100%)
 rename src/{react/Pages/RequestInquiry/RequestInquiry.jsx => pages/RequestInquiry/RequestInquiry.tsx} (96%)
 rename src/{react/Pages/RequestInquiry/SplitAmountForm.jsx => pages/RequestInquiry/SplitAmountForm.tsx} (97%)
 rename src/{react/Pages/RequestInquiry/SplitAmountItem.jsx => pages/RequestInquiry/SplitAmountItem.tsx} (96%)
 rename src/{react/Pages/RequestInquiry/TotalSplitHelper.js => pages/RequestInquiry/TotalSplitHelper.ts} (100%)
 rename src/{react/Pages/RequestInquiryInfo.jsx => pages/RequestInquiryInfo.tsx} (90%)
 rename src/{react/Pages/RequestResponseInfo/AddressForm.jsx => pages/RequestResponseInfo/AddressForm.tsx} (100%)
 rename src/{react/Pages/RequestResponseInfo/RequestResponseInfo.jsx => pages/RequestResponseInfo/RequestResponseInfo.tsx} (92%)
 rename src/{react/Pages/RuleDashboard/RuleCollectionItem.jsx => pages/RuleDashboard/RuleCollectionItem.tsx} (88%)
 rename src/{react/Pages/RuleDashboard/RuleDashboard.jsx => pages/RuleDashboard/RuleDashboard.tsx} (83%)
 rename src/{react/Pages => pages}/RulePage/NewRuleItemMenu.tsx (94%)
 rename src/{react/Pages => pages}/RulePage/RuleCollectionMenu.tsx (97%)
 rename src/{react/Pages => pages}/RulePage/RuleCollectionPreview.tsx (95%)
 rename src/{react/Pages => pages}/RulePage/RuleCollectionPreviewItem.tsx (93%)
 rename src/{react/Pages => pages}/RulePage/RuleCreator.tsx (97%)
 rename src/{react/Pages => pages}/RulePage/RuleItemMenu.tsx (97%)
 rename src/{react/Pages/RulePage/RulePage.jsx => pages/RulePage/RulePage.tsx} (91%)
 rename src/{react/Pages => pages}/RulePage/RuleTypeItems/AccountRuleItem.tsx (93%)
 rename src/{react/Pages => pages}/RulePage/RuleTypeItems/ItemTypeRuleItem.tsx (93%)
 rename src/{react/Pages => pages}/RulePage/RuleTypeItems/TransactionAmountRuleItem.tsx (91%)
 rename src/{react/Pages => pages}/RulePage/RuleTypeItems/ValueRuleItem.tsx (97%)
 rename src/{react/Pages/SavingsGoalPage/SavingsGoalForm.jsx => pages/SavingsGoalPage/SavingsGoalForm.tsx} (87%)
 rename src/{react/Pages/SavingsGoalPage/SavingsGoalPage.jsx => pages/SavingsGoalPage/SavingsGoalPage.tsx} (91%)
 rename src/{react/Pages/SavingsGoalPage/renderAmountFieldCustom.jsx => pages/SavingsGoalPage/renderAmountFieldCustom.tsx} (91%)
 rename src/{react/Pages/SavingsGoals/SavingsGoals.jsx => pages/SavingsGoals/SavingsGoals.tsx} (87%)
 rename src/{react/Pages/ScheduledPayments/ScheduledPaymentItem.jsx => pages/ScheduledPayments/ScheduledPaymentItem.tsx} (91%)
 rename src/{react/Pages/ScheduledPayments/ScheduledPayments.jsx => pages/ScheduledPayments/ScheduledPayments.tsx} (94%)
 rename src/{react/Pages/ScheduledPayments/ScheduledPaymentsEditDialog.jsx => pages/ScheduledPayments/ScheduledPaymentsEditDialog.tsx} (95%)
 rename src/{react/Pages/Settings/EditPasswordForm.jsx => pages/Settings/EditPasswordForm.tsx} (93%)
 rename src/{react/Pages/Settings/Settings.jsx => pages/Settings/Settings.tsx} (93%)
 rename src/{react/Pages/Stats/Chart/PieChart/CategoryCountPieChart.jsx => pages/Stats/Chart/PieChart/CategoryCountPieChart.tsx} (98%)
 rename src/{react/Pages/Stats/Chart/PieChart/CategoryTransactionPieChart.jsx => pages/Stats/Chart/PieChart/CategoryTransactionPieChart.tsx} (95%)
 rename src/{react/Pages/Stats/Chart/PieChart/EventCountPieChart.jsx => pages/Stats/Chart/PieChart/EventCountPieChart.tsx} (98%)
 rename src/{react/Pages/Stats/Chart/PieChart/EventSplitCountPieChart.jsx => pages/Stats/Chart/PieChart/EventSplitCountPieChart.tsx} (99%)
 rename src/{react/Pages/Stats/Chart/PieChart/EventSplitTransactionPieChart.jsx => pages/Stats/Chart/PieChart/EventSplitTransactionPieChart.tsx} (97%)
 rename src/{react/Pages/Stats/Chart/PieChart/EventTransactionPieChart.jsx => pages/Stats/Chart/PieChart/EventTransactionPieChart.tsx} (96%)
 rename src/{react/Pages/Stats/Chart/Timeline/CategoryCountHistoryChart.jsx => pages/Stats/Chart/Timeline/CategoryCountHistoryChart.tsx} (96%)
 rename src/{react/Pages/Stats/Chart/Timeline/CategoryTransactionHistoryChart.jsx => pages/Stats/Chart/Timeline/CategoryTransactionHistoryChart.tsx} (96%)
 rename src/{react/Pages/Stats/Chart/Timeline/EventTypeHistoryChart.jsx => pages/Stats/Chart/Timeline/EventTypeHistoryChart.tsx} (97%)
 rename src/{react/Pages/Stats/Chart/Timeline/EventTypeSplitHistoryChart.jsx => pages/Stats/Chart/Timeline/EventTypeSplitHistoryChart.tsx} (98%)
 rename src/{react/Pages/Stats/Chart/Timeline/EventTypeSplitTransactionHistoryChart.jsx => pages/Stats/Chart/Timeline/EventTypeSplitTransactionHistoryChart.tsx} (98%)
 rename src/{react/Pages/Stats/Chart/Timeline/EventTypeTransactionHistoryChart.jsx => pages/Stats/Chart/Timeline/EventTypeTransactionHistoryChart.tsx} (97%)
 rename src/{react/Pages/Stats/ChartTitle.jsx => pages/Stats/ChartTitle.tsx} (100%)
 rename src/{react/Pages/Stats/Colors.jsx => pages/Stats/Colors.tsx} (100%)
 rename src/{react/Pages/Stats/EventCountSection.jsx => pages/Stats/EventCountSection.tsx} (100%)
 rename src/{react/Pages/Stats/EventCountSidebarSection.jsx => pages/Stats/EventCountSidebarSection.tsx} (97%)
 rename src/{react/Pages/Stats/EventHistorySection.jsx => pages/Stats/EventHistorySection.tsx} (100%)
 rename src/{react/Pages/Stats/Stats.jsx => pages/Stats/Stats.tsx} (98%)
 rename src/{react/Pages/SwitchApiKeys.jsx => pages/SwitchApiKeys.tsx} (97%)
 delete mode 100644 src/react/Actions/accounts.js
 delete mode 100644 src/react/Actions/application.js
 delete mode 100644 src/react/Actions/bunq_me_tab.js
 delete mode 100644 src/react/Actions/bunq_me_tabs.js
 delete mode 100644 src/react/Actions/card_cvc2.js
 delete mode 100644 src/react/Actions/cards.js
 delete mode 100644 src/react/Actions/categories.js
 delete mode 100644 src/react/Actions/category_rules.ts
 delete mode 100644 src/react/Actions/contacts.js
 delete mode 100644 src/react/Actions/export_new.js
 delete mode 100644 src/react/Actions/exports.js
 delete mode 100644 src/react/Actions/snackbar.js
 delete mode 100644 src/react/Reducers/account_id_filter.js
 delete mode 100644 src/react/Reducers/accounts.js
 delete mode 100644 src/react/Reducers/amount_filter.js
 delete mode 100644 src/react/Reducers/application.js
 delete mode 100644 src/react/Reducers/bunq_me_tab.js
 delete mode 100644 src/react/Reducers/bunq_me_tab_filter.js
 delete mode 100644 src/react/Reducers/bunq_me_tabs.js
 delete mode 100644 src/react/Reducers/card_cvc2.js
 delete mode 100644 src/react/Reducers/card_id_filter.js
 delete mode 100644 src/react/Reducers/cards.js
 delete mode 100644 src/react/Reducers/category_filter.js
 delete mode 100644 src/react/Reducers/category_rules.ts
 delete mode 100644 src/react/Reducers/contacts.js
 delete mode 100644 src/react/Reducers/date_filter.js
 delete mode 100644 src/react/Reducers/export_new.js
 delete mode 100644 src/react/Reducers/exports.js
 delete mode 100644 src/react/Reducers/snackbar.js
 delete mode 100644 src/react/Store.jsx
 rename src/{react/StaticData => staticdata}/CountryCodes.json (100%)
 rename src/{react/StaticData => staticdata}/Icons.json (100%)
 create mode 100644 src/store/accountIdFilter/index.ts
 create mode 100644 src/store/accounts/index.ts
 create mode 100644 src/store/accounts/thunks.ts
 create mode 100644 src/store/amountFilter/index.ts
 create mode 100644 src/store/application/index.ts
 create mode 100644 src/store/bunqMeTab/index.ts
 create mode 100644 src/store/bunqMeTab/thunks.ts
 create mode 100644 src/store/bunqMeTabFilter/index.ts
 create mode 100644 src/store/bunqMeTabs/index.ts
 create mode 100644 src/store/bunqMeTabs/thunks.ts
 create mode 100644 src/store/cardCvc2/index.ts
 create mode 100644 src/store/cardCvc2/thunks.ts
 create mode 100644 src/store/cardIdFilter/index.ts
 create mode 100644 src/store/cards/index.ts
 create mode 100644 src/store/cards/thunks.ts
 rename src/{react/Reducers/categories.js => store/categories/index.ts} (50%)
 create mode 100644 src/store/categoryFilter/index.ts
 create mode 100644 src/store/categoryRules/index.ts
 create mode 100644 src/store/contacts/index.ts
 create mode 100644 src/store/contacts/thunks.ts
 create mode 100644 src/store/dateFilter/index.ts
 create mode 100644 src/store/exportNew/index.ts
 create mode 100644 src/store/exportNew/thunks.ts
 create mode 100644 src/store/exports/index.ts
 create mode 100644 src/store/exports/thunks.ts
 create mode 100644 src/store/index.ts
 create mode 100644 src/store/snackbar/index.ts
 rename src/{react/Themes/DarkTheme.jsx => themes/DarkTheme.ts} (100%)
 rename src/{react/Themes/DefaultTheme.jsx => themes/DefaultTheme.ts} (100%)
 create mode 100644 src/types/Category.ts
 rename src/{react/Types => types}/Event.ts (100%)
 rename src/{react/Types => types}/RuleCollection.ts (99%)
 rename src/{react/Types => types}/Rules/AccountRule.ts (100%)
 rename src/{react/Types => types}/Rules/Rule.ts (100%)
 rename src/{react/Types => types}/Rules/TransactionAmountRule.ts (100%)
 rename src/{react/Types => types}/Rules/TypeRule.ts (100%)
 rename src/{react/Types => types}/Rules/ValueRule.ts (100%)
 rename src/{react/Types => types}/Types.ts (99%)
 rename src/{react/WebWorkers => webworkers}/crypto.worker.js (93%)
 rename src/{react/WebWorkers => webworkers}/rule_collection_check.worker.js (95%)
 rename src/{react/WebWorkers => webworkers}/stats.worker.js (98%)
 create mode 100644 webpacktools.js

diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 85a0c888..00000000
--- a/.babelrc
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-    "presets": [
-        "@babel/preset-react",
-        [
-            "@babel/preset-env",
-            {
-                "targets": {
-                    "browsers": [
-                        "last 2 versions"
-                    ]
-                }
-            }
-        ]
-    ],
-    "plugins": [
-        "react-html-attrs",
-        "@babel/plugin-proposal-object-rest-spread",
-        [
-            "@babel/plugin-transform-runtime",
-            {
-                "helpers": false,
-                "regenerator": true
-            }
-        ],
-        "@babel/plugin-proposal-class-properties",
-        "@babel/plugin-transform-react-constant-elements",
-        "@babel/plugin-transform-react-inline-elements",
-        "@babel/plugin-transform-react-jsx-source",
-        "@babel/plugin-syntax-dynamic-import"
-    ],
-    "env": {
-        "test": {
-            "plugins": [
-                "babel-plugin-dynamic-import-node"
-            ]
-        },
-        "development": {
-            "compact": false
-        }
-    }
-}
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 00000000..7871fc37
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,58 @@
+const { fixResolvePath, getResolverAlias } = require("./webpacktools");
+
+module.exports = function (api) {
+    api.cache(true);
+
+    return {
+        "presets": [
+            "@babel/preset-react",
+            [
+                "@babel/preset-env",
+                {
+                    "targets": {
+                        "browsers": [
+                            "last 2 versions"
+                        ]
+                    }
+                }
+            ]
+        ],
+        "plugins": [
+            "react-html-attrs",
+            [
+                "module-resolver",
+                {
+                    root: ["./"],
+                    alias: getResolverAlias(__dirname),
+                    resolvePath: fixResolvePath(__dirname),
+                },
+            ],
+            "@babel/plugin-proposal-object-rest-spread",
+            [
+                "@babel/plugin-transform-runtime",
+                {
+                    "helpers": false,
+                    "regenerator": true
+                }
+            ],
+            "@babel/plugin-proposal-class-properties",
+            "@babel/plugin-proposal-nullish-coalescing-operator",
+            "@babel/plugin-proposal-optional-chaining",
+            "@babel/plugin-transform-react-constant-elements",
+            "@babel/plugin-transform-react-inline-elements",
+            "@babel/plugin-transform-react-jsx-source",
+            "@babel/plugin-syntax-dynamic-import"
+        ],
+        "env": {
+            "test": {
+                "plugins": [
+                    "babel-plugin-dynamic-import-node"
+                ]
+            },
+            "development": {
+                "compact": false
+            }
+        }
+    };
+};
+
diff --git a/package.json b/package.json
index 2dc9458a..c7c715ed 100644
--- a/package.json
+++ b/package.json
@@ -129,6 +129,9 @@
         ]
     },
     "dependencies": {
+        "@manaflair/redux-batch": "^1.0.0",
+        "@reduxjs/toolkit": "^1.2.3",
+        "@types/lodash": "^4.14.149",
         "electron-localshortcut": "^3.2.1",
         "electron-log": "^2.2.9",
         "electron-settings": "^3.1.3",
@@ -136,6 +139,8 @@
         "glob": "^7.1.2",
         "i18next": "^10.6.0",
         "i18next-xhr-backend": "^1.5.1",
+        "lodash": "^4.17.15",
+        "redux-saga": "^1.1.3",
         "upath": "1.0.5"
     },
     "devDependencies": {
@@ -150,9 +155,9 @@
         "@babel/plugin-proposal-function-sent": "^7.7.4",
         "@babel/plugin-proposal-json-strings": "^7.7.4",
         "@babel/plugin-proposal-logical-assignment-operators": "^7.7.4",
-        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
         "@babel/plugin-proposal-numeric-separator": "^7.7.4",
-        "@babel/plugin-proposal-optional-chaining": "^7.7.4",
+        "@babel/plugin-proposal-optional-chaining": "^7.8.3",
         "@babel/plugin-proposal-pipeline-operator": "^7.7.4",
         "@babel/plugin-proposal-throw-expressions": "^7.7.4",
         "@babel/plugin-syntax-dynamic-import": "^7.7.4",
@@ -169,6 +174,7 @@
         "@material-ui/core": "^3.9.2",
         "@material-ui/icons": "^3.0.2",
         "@material-ui/lab": "^3.0.0-alpha.30",
+        "@rollup/plugin-typescript": "^2.1.0",
         "@types/jest": "^24.0.25",
         "@types/moxios": "^0.4.9",
         "@types/node": "^13.1.4",
@@ -178,6 +184,7 @@
         "axios": "0.18.1",
         "babel-loader": "^8.0.6",
         "babel-plugin-dynamic-import-node": "^2.3.0",
+        "babel-plugin-module-resolver": "^4.0.0",
         "babel-plugin-react-html-attrs": "^2.1.0",
         "babel-plugin-system-import-transformer": "^3.1.0",
         "chart.js": "^2.7.2",
diff --git a/src/react/Actions/filters.js b/src/Actions/filters.js
similarity index 100%
rename from src/react/Actions/filters.js
rename to src/Actions/filters.js
diff --git a/src/react/Actions/master_card_action_info.js b/src/Actions/master_card_action_info.js
similarity index 93%
rename from src/react/Actions/master_card_action_info.js
rename to src/Actions/master_card_action_info.js
index b8104ddb..b9abea1c 100644
--- a/src/react/Actions/master_card_action_info.js
+++ b/src/Actions/master_card_action_info.js
@@ -1,5 +1,5 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import MasterCardAction from "../Models/MasterCardAction";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import MasterCardAction from "~models/MasterCardAction";
 
 import { masterCardActionsSetInfo } from "./master_card_actions";
 
@@ -14,6 +14,18 @@ export function masterCardActionSetInfo(master_card_action_info, account_id, mas
     };
 }
 
+export function masterCardActionInfoLoading() {
+    return { type: "MASTER_CARD_ACTION_INFO_IS_LOADING" };
+}
+
+export function masterCardActionInfoNotLoading() {
+    return { type: "MASTER_CARD_ACTION_INFO_IS_NOT_LOADING" };
+}
+
+export function masterCardActionInfoClear() {
+    return { type: "MASTER_CARD_ACTION_INFO_CLEAR" };
+}
+
 export function masterCardActionInfoUpdate(BunqJSClient, user_id, account_id, master_card_action_id) {
     const failedMessage = window.t("We failed to load the mastercard payment information");
 
@@ -37,14 +49,4 @@ export function masterCardActionInfoUpdate(BunqJSClient, user_id, account_id, ma
     };
 }
 
-export function masterCardActionInfoLoading() {
-    return { type: "MASTER_CARD_ACTION_INFO_IS_LOADING" };
-}
 
-export function masterCardActionInfoNotLoading() {
-    return { type: "MASTER_CARD_ACTION_INFO_IS_NOT_LOADING" };
-}
-
-export function masterCardActionInfoClear() {
-    return { type: "MASTER_CARD_ACTION_INFO_CLEAR" };
-}
diff --git a/src/react/Actions/master_card_actions.js b/src/Actions/master_card_actions.js
similarity index 93%
rename from src/react/Actions/master_card_actions.js
rename to src/Actions/master_card_actions.js
index 948cb9b4..be464cd3 100644
--- a/src/react/Actions/master_card_actions.js
+++ b/src/Actions/master_card_actions.js
@@ -1,5 +1,4 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import MasterCardAction from "../Models/MasterCardAction";
+import MasterCardAction from "~models/MasterCardAction";
 
 export const STORED_MASTER_CARD_ACTIONS = "BUNQDESKTOP_STORED_MASTER_CARD_ACTIONS";
 
@@ -60,7 +59,8 @@ export function masterCardActionsUpdate(
             })
             .catch(error => {
                 dispatch(masterCardActionsNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
+                // FIXME
+                // BunqErrorHandler(dispatch, error, failedMessage);
             });
     };
 }
diff --git a/src/react/Actions/modal.js b/src/Actions/modal.js
similarity index 100%
rename from src/react/Actions/modal.js
rename to src/Actions/modal.js
diff --git a/src/react/Actions/note_texts.js b/src/Actions/note_texts.js
similarity index 98%
rename from src/react/Actions/note_texts.js
rename to src/Actions/note_texts.js
index d10de06d..5804a177 100644
--- a/src/react/Actions/note_texts.js
+++ b/src/Actions/note_texts.js
@@ -1,4 +1,4 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 
 export function noteTextsSetInfo(noteTexts, event_type, user_id, account_id, event_id) {
     return {
diff --git a/src/react/Actions/oauth.js b/src/Actions/oauth.js
similarity index 100%
rename from src/react/Actions/oauth.js
rename to src/Actions/oauth.js
diff --git a/src/react/Actions/options.js b/src/Actions/options.js
similarity index 100%
rename from src/react/Actions/options.js
rename to src/Actions/options.js
diff --git a/src/react/Actions/pagination.js b/src/Actions/pagination.js
similarity index 100%
rename from src/react/Actions/pagination.js
rename to src/Actions/pagination.js
diff --git a/src/react/Actions/pay.js b/src/Actions/pay.js
similarity index 90%
rename from src/react/Actions/pay.js
rename to src/Actions/pay.js
index e45d4ab6..7b2163ad 100644
--- a/src/react/Actions/pay.js
+++ b/src/Actions/pay.js
@@ -1,9 +1,9 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import { openSnackbar } from "./snackbar";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 import { paymentInfoUpdate } from "./payments";
-import { accountsUpdate } from "./accounts";
 import { shareInviteMonetaryAccountInquiriesInfoUpdate } from "./share_invite_monetary_account_inquiries";
 import { shareInviteMonetaryAccountResponsesInfoUpdate } from "./share_invite_monetary_account_responses";
+import { actions as snackbarActions } from "~store/snackbar";
+import { accountsUpdate } from "~store/accounts/thunks";
 
 export function paySend(BunqJSClient, userId, accountId, description, amount, targets, draft = false) {
     const failedMessage = window.t("We received the following error while sending your payment");
@@ -28,10 +28,10 @@ export function paySend(BunqJSClient, userId, accountId, description, amount, ta
 
         paymentHandler
             .post(userId, accountId, description, amount, targetData)
-            .then(result => {
+            .then(() => {
                 const notification = draft ? successMessage1 : isMultiple ? successMessage2 : successMessage3;
 
-                dispatch(openSnackbar(notification));
+                dispatch(snackbarActions.open({ message: notification }));
 
                 // update the payments, accounts and share list
                 dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(BunqJSClient, userId));
@@ -73,9 +73,9 @@ export function paySchedule(BunqJSClient, userId, accountId, description, amount
 
         scheduleTypeHandler
             .post(userId, accountId, paymentData, schedule)
-            .then(result => {
+            .then(() => {
                 const notification = isMultiple ? successMessage1 : successMessage2;
-                dispatch(openSnackbar(notification));
+                dispatch(snackbarActions.open({ message: notification }));
 
                 // update the payments, accounts and share list
                 dispatch(paymentInfoUpdate(BunqJSClient, userId, accountId));
diff --git a/src/react/Actions/payment_info.js b/src/Actions/payment_info.js
similarity index 93%
rename from src/react/Actions/payment_info.js
rename to src/Actions/payment_info.js
index 4dad712f..ff63e8f5 100644
--- a/src/react/Actions/payment_info.js
+++ b/src/Actions/payment_info.js
@@ -1,5 +1,5 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import Payment from "../Models/Payment";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import Payment from "~models/Payment";
 
 import { paymentsSetInfo } from "./payments";
 
diff --git a/src/react/Actions/payments.js b/src/Actions/payments.js
similarity index 93%
rename from src/react/Actions/payments.js
rename to src/Actions/payments.js
index d2ac50f0..3540231e 100644
--- a/src/react/Actions/payments.js
+++ b/src/Actions/payments.js
@@ -1,7 +1,7 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import { paymentApiFilter } from "../Functions/DataFilters";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import { paymentApiFilter } from "~functions/DataFilters";
 
-import Payment from "../Models/Payment";
+import Payment from "~models/Payment";
 
 export const STORED_PAYMENTS = "BUNQDESKTOP_STORED_PAYMENTS";
 
diff --git a/src/react/Actions/pending_payments.js b/src/Actions/pending_payments.js
similarity index 100%
rename from src/react/Actions/pending_payments.js
rename to src/Actions/pending_payments.js
diff --git a/src/react/Actions/queue.js b/src/Actions/queue.js
similarity index 100%
rename from src/react/Actions/queue.js
rename to src/Actions/queue.js
diff --git a/src/react/Actions/registration.js b/src/Actions/registration.js
similarity index 84%
rename from src/react/Actions/registration.js
rename to src/Actions/registration.js
index f93746ae..178d700f 100644
--- a/src/react/Actions/registration.js
+++ b/src/Actions/registration.js
@@ -1,18 +1,19 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import { applicationSetStatus } from "./application";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 import { userSetInfo } from "./user";
 import { loadStoredPayments } from "./payments";
-import { loadStoredAccounts } from "./accounts";
-import { loadStoredBunqMeTabs } from "./bunq_me_tabs";
+import { loadStoredAccounts } from "~store/accounts/thunks";
+import { loadStoredBunqMeTabs } from "~store/bunqMeTabs/thunks";
 import { loadStoredMasterCardActions } from "./master_card_actions";
 import { loadStoredRequestInquiries } from "./request_inquiries";
 import { loadStoredrequestInquiryBatches } from "./request_inquiry_batches";
 import { loadStoredRequestResponses } from "./request_responses";
-import { loadStoredContacts } from "./contacts";
+import { loadStoredContacts } from "~store/contacts/thunks";
 import { loadStoredShareInviteMonetaryAccountResponses } from "./share_invite_monetary_account_responses";
 import { loadStoredShareInviteBankInquiries } from "./share_invite_monetary_account_inquiries";
 import { loadPendingPayments } from "./pending_payments";
-import { openSnackbar } from "./snackbar";
+
+import { actions as applicationActions } from "~store/application";
+import { actions as snackbarActions } from "~store/snackbar";
 
 /**
  * Logs out of current account and logs back in to the selected stored key
@@ -50,28 +51,35 @@ export function registrationLogin(apiKey = false, deviceName = false, environmen
         dispatch(registrationLoading());
 
         if (!apiKey) {
-            dispatch(applicationSetStatus(statusMessage));
+            dispatch(applicationActions.setStatusMessage(statusMessage));
             if (BunqDesktopClient.derivedPassword) {
                 try {
                     const hasStoredApiKey = await BunqDesktopClient.loadApiKey();
                     if (!hasStoredApiKey) {
                         // no given key and no stored key
-                        dispatch(registrationNotLoading());
-                        dispatch(registrationSetNotReady());
+                        dispatch([
+                            registrationNotLoading(),
+                            registrationSetNotReady(),
+                        ]);
                         return;
                     }
                     apiKey = hasStoredApiKey;
                 } catch (exception) {
                     BunqDesktopClient.Logger.error(exception);
-                    dispatch(openSnackbar(failedToDecryptDataMessage));
-                    dispatch(registrationLogOut(false));
-                    dispatch(registrationNotLoading());
-                    dispatch(registrationSetNotReady());
+                    dispatch([
+                        snackbarActions.open(failedToDecryptDataMessage),
+                        registrationLogOut(false),
+                        registrationNotLoading(),
+                        registrationSetNotReady(),
+                    ]);
+
                     return;
                 }
             } else {
-                dispatch(registrationNotLoading());
-                dispatch(registrationSetNotReady());
+                dispatch([
+                    registrationNotLoading(),
+                    registrationSetNotReady(),
+                ]);
                 return;
             }
 
@@ -83,13 +91,13 @@ export function registrationLogin(apiKey = false, deviceName = false, environmen
         try {
             await BunqDesktopClient.BunqJSClientRun();
 
-            dispatch(applicationSetStatus(statusMessage2));
+            dispatch(applicationActions.setStatusMessage(statusMessage2));
             await BunqDesktopClient.BunqJSClientInstall();
 
-            dispatch(applicationSetStatus(statusMessage3));
+            dispatch(applicationActions.setStatusMessage(statusMessage3));
             await BunqDesktopClient.BunqJSClientRegisterDevice();
 
-            dispatch(applicationSetStatus(statusMessage4));
+            dispatch(applicationActions.setStatusMessage(statusMessage4));
             await BunqDesktopClient.BunqJSClientRegisterSession();
 
             const users = await BunqDesktopClient.BunqJSClientGetUsers();
@@ -99,18 +107,23 @@ export function registrationLogin(apiKey = false, deviceName = false, environmen
             // load bunq api data and other data like contacts from storage
             dispatch(registrationLoadStoredData());
         } catch (exception) {
-            BunqErrorHandler(dispatch, exception, false, BunqJSClient);
-            dispatch(registrationResetToApiScreen());
-            dispatch(registrationNotLoading());
-            dispatch(registrationSetNotReady());
+            const batchedActions = [];
+            BunqErrorHandler(batchedActions, exception, false, BunqJSClient);
+            dispatch(batchedActions.concat([
+                registrationResetToApiScreen(),
+                registrationNotLoading(),
+                registrationSetNotReady(),
+            ]));
             return;
         }
 
         setTimeout(() => {
-            dispatch(applicationSetStatus(""));
-            dispatch(registrationNotLoading());
-            dispatch(registrationSetBunqDesktopClientData());
-            dispatch(registrationSetReady());
+            dispatch([
+                applicationActions.setStatusMessage(""),
+                registrationNotLoading(),
+                registrationSetBunqDesktopClientData(),
+                registrationSetReady(),
+            ]);
         }, 500);
     };
 }
@@ -134,7 +147,7 @@ export const registrationSwitchStoredApiKey = keyIndex => {
                 BunqDesktopClient.Logger.error("switchStoredApiKey");
                 BunqDesktopClient.Logger.error(error);
                 dispatch(registrationNotLoading());
-                dispatch(openSnackbar(failureMessage));
+                dispatch(snackbarActions.open({ message: failureMessage }));
             });
     };
 };
@@ -159,7 +172,7 @@ export const registrationSetPassword = password => {
                 BunqDesktopClient.Logger.error("setupPassword");
                 BunqDesktopClient.Logger.error(error);
                 dispatch(registrationNotLoading());
-                dispatch(openSnackbar(failureMessage));
+                dispatch(snackbarActions.open({ message: failureMessage }));
             });
     };
 };
@@ -183,7 +196,7 @@ export const registrationSkipPassword = () => {
                 BunqDesktopClient.Logger.error("skipPassword");
                 BunqDesktopClient.Logger.error(error);
                 dispatch(registrationNotLoading());
-                dispatch(openSnackbar(failureMessage));
+                dispatch(snackbarActions.open({ message: failureMessage }));
             });
     };
 };
@@ -203,13 +216,13 @@ export const registrationChangePassword = newPassword => {
             .then(done => {
                 dispatch(registrationNotLoading());
                 dispatch(registrationSetBunqDesktopClientData());
-                dispatch(openSnackbar(successMessage));
+                dispatch(snackbarActions.open({ message: successMessage }));
             })
             .catch(error => {
                 BunqDesktopClient.Logger.error("changePassword");
                 BunqDesktopClient.Logger.error(error);
                 dispatch(registrationNotLoading());
-                dispatch(openSnackbar(failureMessage));
+                dispatch(snackbarActions.open({ message: failureMessage }));
             });
     };
 };
diff --git a/src/react/Actions/request_inquiries.js b/src/Actions/request_inquiries.js
similarity index 95%
rename from src/react/Actions/request_inquiries.js
rename to src/Actions/request_inquiries.js
index b1b7505e..d10fb924 100644
--- a/src/react/Actions/request_inquiries.js
+++ b/src/Actions/request_inquiries.js
@@ -1,5 +1,5 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import RequestInquiry from "../Models/RequestInquiry";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import RequestInquiry from "~models/RequestInquiry";
 
 export const STORED_REQUEST_INQUIRIES = "BUNQDESKTOP_STORED_REQUEST_INQUIRIES";
 
diff --git a/src/react/Actions/request_inquiry.js b/src/Actions/request_inquiry.js
similarity index 82%
rename from src/react/Actions/request_inquiry.js
rename to src/Actions/request_inquiry.js
index b2b0802f..a062b19a 100644
--- a/src/react/Actions/request_inquiry.js
+++ b/src/Actions/request_inquiry.js
@@ -1,7 +1,7 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import { openSnackbar } from "./snackbar";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 import { requestInquiryUpdate } from "./request_inquiry_info";
 import { requestInquiryBatchesUpdate } from "./request_inquiry_batches";
+import { actions as snackbarActions } from "~store/snackbar";
 
 export function requestInquirySend(BunqJSClient, userId, accountId, requestInquiries) {
     const failedMessage = window.t("We received the following error while sending your request");
@@ -12,12 +12,13 @@ export function requestInquirySend(BunqJSClient, userId, accountId, requestInqui
         BunqJSClient.api.requestInquiryBatch
             .post(userId, accountId, requestInquiries, false, {})
             .then(result => {
-                dispatch(openSnackbar(successMessage));
+                dispatch(snackbarActions.open({ message: successMessage }));
                 dispatch(requestInquiryNotLoading());
             })
             .catch(error => {
                 dispatch(requestInquiryNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
+                // FIXME
+                // BunqErrorHandler(dispatch, error, failedMessage);
             });
     };
 }
@@ -30,8 +31,8 @@ export function requestInquiryCancel(BunqJSClient, userId, accountId, requestInq
         dispatch(requestInquiryLoading());
         BunqJSClient.api.requestInquiry
             .put(userId, accountId, requestInquiryId, "REVOKED")
-            .then(result => {
-                dispatch(openSnackbar(successMessage));
+            .then(() => {
+                dispatch(snackbarActions.open({ message: successMessage }));
                 dispatch(requestInquiryNotLoading());
 
                 // update the information page
diff --git a/src/react/Actions/request_inquiry_batches.js b/src/Actions/request_inquiry_batches.js
similarity index 95%
rename from src/react/Actions/request_inquiry_batches.js
rename to src/Actions/request_inquiry_batches.js
index 8034d62d..856e7112 100644
--- a/src/react/Actions/request_inquiry_batches.js
+++ b/src/Actions/request_inquiry_batches.js
@@ -1,5 +1,5 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import RequestInquiryBatch from "../Models/RequestInquiryBatch";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import RequestInquiryBatch from "~models/RequestInquiryBatch";
 
 export const STORED_REQUEST_INQUIRY_BATCHES = "BUNQDESKTOP_STORED_REQUEST_INQUIRY_BATCHES";
 
diff --git a/src/react/Actions/request_inquiry_info.js b/src/Actions/request_inquiry_info.js
similarity index 93%
rename from src/react/Actions/request_inquiry_info.js
rename to src/Actions/request_inquiry_info.js
index 9a075d14..6c1239e6 100644
--- a/src/react/Actions/request_inquiry_info.js
+++ b/src/Actions/request_inquiry_info.js
@@ -1,5 +1,5 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import RequestInquiry from "../Models/RequestInquiry";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import RequestInquiry from "~models/RequestInquiry";
 
 import { requestInquiriesSetInfo } from "./request_inquiries";
 
diff --git a/src/react/Actions/request_response.js b/src/Actions/request_response.js
similarity index 79%
rename from src/react/Actions/request_response.js
rename to src/Actions/request_response.js
index 04461741..d6ca8c18 100644
--- a/src/react/Actions/request_response.js
+++ b/src/Actions/request_response.js
@@ -1,8 +1,9 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import { openSnackbar } from "./snackbar";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 import { requestResponseUpdate } from "./request_response_info";
 import { requestInquiryBatchesUpdate } from "./request_inquiry_batches";
 
+import { actions as snackbarActions } from "~store/snackbar";
+
 // Disabled until after 0.7 release
 export function requestResponseAccept(
     BunqJSClient,
@@ -26,13 +27,13 @@ export function requestResponseAccept(
                 address_shipping: options.address_shipping,
                 amount_responded: amountResponded
             })
-            .then(result => {
-                dispatch(openSnackbar(successMessage));
-                dispatch(requestResponseNotLoading());
-
-                // update the information page
-                dispatch(requestResponseUpdate(BunqJSClient, userId, accountId, requestResponseId));
-                dispatch(requestInquiryBatchesUpdate(BunqJSClient, userId, accountId));
+            .then(() => {
+                dispatch([
+                    snackbarActions.open({ message: successMessage }),
+                    requestResponseNotLoading(),
+                    requestResponseUpdate(BunqJSClient, userId, accountId, requestResponseId),
+                    requestInquiryBatchesUpdate(BunqJSClient, userId, accountId),
+                ]);
             })
             .catch(error => {
                 dispatch(requestResponseNotLoading());
@@ -58,7 +59,7 @@ export function requestResponseReject(BunqJSClient, userId, accountId, requestRe
             })
             .catch(error => {
                 dispatch(requestResponseNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
+                // BunqErrorHandler(dispatch, error, failedMessage);
             });
     };
 }
diff --git a/src/react/Actions/request_response_info.js b/src/Actions/request_response_info.js
similarity index 93%
rename from src/react/Actions/request_response_info.js
rename to src/Actions/request_response_info.js
index d4e13e5a..9d31e716 100644
--- a/src/react/Actions/request_response_info.js
+++ b/src/Actions/request_response_info.js
@@ -1,5 +1,5 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import RequestResponse from "../Models/RequestResponse";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import RequestResponse from "~models/RequestResponse";
 
 import { requestResponsesSetInfo } from "./request_responses";
 
diff --git a/src/react/Actions/request_responses.js b/src/Actions/request_responses.js
similarity index 95%
rename from src/react/Actions/request_responses.js
rename to src/Actions/request_responses.js
index 49058d9e..f6eb1af2 100644
--- a/src/react/Actions/request_responses.js
+++ b/src/Actions/request_responses.js
@@ -1,5 +1,5 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import RequestResponse from "../Models/RequestResponse";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import RequestResponse from "~models/RequestResponse";
 
 export const STORED_REQUEST_RESPONSES = "BUNQDESKTOP_STORED_REQUEST_RESPONSES";
 
diff --git a/src/react/Actions/savings_goals.js b/src/Actions/savings_goals.js
similarity index 100%
rename from src/react/Actions/savings_goals.js
rename to src/Actions/savings_goals.js
diff --git a/src/react/Actions/scheduled_payments.js b/src/Actions/scheduled_payments.js
similarity index 97%
rename from src/react/Actions/scheduled_payments.js
rename to src/Actions/scheduled_payments.js
index 1fd0f226..3ff2bafe 100644
--- a/src/react/Actions/scheduled_payments.js
+++ b/src/Actions/scheduled_payments.js
@@ -1,4 +1,4 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 
 export function scheduledPaymentsSetInfo(scheduled_payments, account_id) {
     return {
diff --git a/src/react/Actions/share_invite_monetary_account_inquiries.js b/src/Actions/share_invite_monetary_account_inquiries.js
similarity index 97%
rename from src/react/Actions/share_invite_monetary_account_inquiries.js
rename to src/Actions/share_invite_monetary_account_inquiries.js
index 320116a9..25ebe7d0 100644
--- a/src/react/Actions/share_invite_monetary_account_inquiries.js
+++ b/src/Actions/share_invite_monetary_account_inquiries.js
@@ -1,4 +1,4 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 
 export const STORED_SHARE_INVITE_MONETARY_ACCOUNT_INQUIRIES = "BUNQDESKTOP_SHARE_INVITE_MONETARY_ACCOUNT_INQUIRIES";
 
diff --git a/src/react/Actions/share_invite_monetary_account_inquiry.js b/src/Actions/share_invite_monetary_account_inquiry.js
similarity index 89%
rename from src/react/Actions/share_invite_monetary_account_inquiry.js
rename to src/Actions/share_invite_monetary_account_inquiry.js
index 8d512774..a5d19c06 100644
--- a/src/react/Actions/share_invite_monetary_account_inquiry.js
+++ b/src/Actions/share_invite_monetary_account_inquiry.js
@@ -1,6 +1,6 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import { openSnackbar } from "./snackbar";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 import { shareInviteMonetaryAccountInquiriesInfoUpdate } from "./share_invite_monetary_account_inquiries";
+import { actions as snackbarActions } from "~store/snackbar";
 
 export function shareInviteMonetaryAccountInquirySend(
     BunqJSClient,
@@ -23,7 +23,7 @@ export function shareInviteMonetaryAccountInquirySend(
                 ...shareOptions
             })
             .then(result => {
-                dispatch(openSnackbar(successMessage));
+                dispatch(snackbarActions.open({ message: successMessage }));
 
                 // update the payments, accounts and share list
                 dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(BunqJSClient, userId, accountId));
@@ -31,7 +31,8 @@ export function shareInviteMonetaryAccountInquirySend(
             })
             .catch(error => {
                 dispatch(shareInviteMonetaryAccountInquiryNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
+                // FIXME
+                // BunqErrorHandler(dispatch, error, failedMessage);
             });
     };
 }
diff --git a/src/react/Actions/share_invite_monetary_account_response.js b/src/Actions/share_invite_monetary_account_response.js
similarity index 85%
rename from src/react/Actions/share_invite_monetary_account_response.js
rename to src/Actions/share_invite_monetary_account_response.js
index 74b77df7..9bd90068 100644
--- a/src/react/Actions/share_invite_monetary_account_response.js
+++ b/src/Actions/share_invite_monetary_account_response.js
@@ -1,6 +1,5 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import { openSnackbar } from "./snackbar";
 import { shareInviteMonetaryAccountResponsesInfoUpdate } from "./share_invite_monetary_account_responses";
+import { actions as snackbarActions } from "~store/snackbar";
 
 export function shareInviteMonetaryAccountResponseChangeStatus(
     BunqJSClient,
@@ -17,7 +16,7 @@ export function shareInviteMonetaryAccountResponseChangeStatus(
         BunqJSClient.api.shareInviteMonetaryAccountResponse
             .putStatus(userId, shareInviteMonetaryAccountResponseId, status)
             .then(result => {
-                dispatch(openSnackbar(successMessage));
+                dispatch(snackbarActions.open({ message: successMessage }));
 
                 // update the payments, accounts and share list
                 dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(BunqJSClient, userId, accountId));
@@ -25,7 +24,8 @@ export function shareInviteMonetaryAccountResponseChangeStatus(
             })
             .catch(error => {
                 dispatch(shareInviteMonetaryAccountResponseNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
+                // FIXME
+                // BunqErrorHandler(dispatch, error, failedMessage);
             });
     };
 }
diff --git a/src/react/Actions/share_invite_monetary_account_responses.js b/src/Actions/share_invite_monetary_account_responses.js
similarity index 97%
rename from src/react/Actions/share_invite_monetary_account_responses.js
rename to src/Actions/share_invite_monetary_account_responses.js
index 05e4f7d9..8cf86fa0 100644
--- a/src/react/Actions/share_invite_monetary_account_responses.js
+++ b/src/Actions/share_invite_monetary_account_responses.js
@@ -1,4 +1,4 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 
 export const STORED_SHARE_INVITE_MONETARY_ACCOUNT_RESPONSES = "BUNQDESKTOP_SHARE_INVITE_MONETARY_ACCOUNT_RESPONSES";
 
diff --git a/src/react/Actions/sidebar.js b/src/Actions/sidebar.js
similarity index 100%
rename from src/react/Actions/sidebar.js
rename to src/Actions/sidebar.js
diff --git a/src/react/Actions/user.js b/src/Actions/user.js
similarity index 89%
rename from src/react/Actions/user.js
rename to src/Actions/user.js
index 291cad10..a36bf76c 100644
--- a/src/react/Actions/user.js
+++ b/src/Actions/user.js
@@ -1,8 +1,8 @@
 import store from "store";
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 
 import { registrationClearUserInfo } from "./registration";
-import { openSnackbar } from "./snackbar";
+import { actions as snackbarActions } from "~store/snackbar";
 import { usersUpdate } from "./users";
 
 const USER_ID_LOCATION = "BUNQDESKTOP_USER_ID";
@@ -53,8 +53,8 @@ export function userUpdateImage(BunqJSClient, userId, attachmentId, userType = "
                 }
 
                 apiPromise
-                    .then(result => {
-                        dispatch(openSnackbar(successMessage));
+                    .then(() => {
+                        dispatch(snackbarActions.open({ message: successMessage }));
                         dispatch(usersUpdate(BunqJSClient, true));
                     })
                     .catch(error => {
diff --git a/src/react/Actions/users.js b/src/Actions/users.js
similarity index 94%
rename from src/react/Actions/users.js
rename to src/Actions/users.js
index 27fb3c79..d7809bb1 100644
--- a/src/react/Actions/users.js
+++ b/src/Actions/users.js
@@ -1,4 +1,4 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 import { userSetInfo } from "./user";
 
 export function usersUpdate(BunqJSClient, updated = false) {
diff --git a/src/react/Reducers/general_filter.js b/src/Reducers/general_filter.js
similarity index 100%
rename from src/react/Reducers/general_filter.js
rename to src/Reducers/general_filter.js
diff --git a/src/react/Reducers/index.js b/src/Reducers/index.js
similarity index 98%
rename from src/react/Reducers/index.js
rename to src/Reducers/index.js
index be1e262b..951ae358 100644
--- a/src/react/Reducers/index.js
+++ b/src/Reducers/index.js
@@ -1,9 +1,9 @@
 import { combineReducers } from "redux";
 import { reducer as formReducer } from "redux-form";
 
-import amount_filter from "./amount_filter";
 import account_id_filter from "./account_id_filter";
 import accounts from "./accounts";
+import amount_filter from "./amount_filter";
 import application from "./application";
 import bunq_me_tabs from "./bunq_me_tabs";
 import bunq_me_tab_filter from "./bunq_me_tab_filter";
@@ -13,7 +13,7 @@ import category_filter from "./category_filter";
 import cards from "./cards";
 import card_cvc2 from "./card_cvc2";
 import card_id_filter from "./card_id_filter";
-import category_rules from "./category_rules.ts";
+import category_rules from "./category_rules";
 import contacts from "./contacts";
 import date_filter from "./date_filter";
 import export_new from "./export_new";
diff --git a/src/react/Reducers/master_card_action_info.js b/src/Reducers/master_card_action_info.js
similarity index 100%
rename from src/react/Reducers/master_card_action_info.js
rename to src/Reducers/master_card_action_info.js
diff --git a/src/react/Reducers/master_card_actions.js b/src/Reducers/master_card_actions.js
similarity index 90%
rename from src/react/Reducers/master_card_actions.js
rename to src/Reducers/master_card_actions.js
index 2a5ff825..f478af3c 100644
--- a/src/react/Reducers/master_card_actions.js
+++ b/src/Reducers/master_card_actions.js
@@ -1,9 +1,6 @@
-import store from "store";
-import MergeApiObjects from "../Functions/MergeApiObjects";
-import { storeEncryptString } from "../Functions/Crypto/CryptoWorkerWrapper";
+import MergeApiObjects from "~functions/MergeApiObjects";
 
-import { STORED_MASTER_CARD_ACTIONS } from "../Actions/master_card_actions";
-import { STORED_BUNQ_ME_TABS } from "../Actions/bunq_me_tabs";
+import { STORED_MASTER_CARD_ACTIONS } from "~actions/master_card_actions";
 
 export const defaultState = {
     master_card_actions: [],
diff --git a/src/react/Reducers/modal.js b/src/Reducers/modal.js
similarity index 100%
rename from src/react/Reducers/modal.js
rename to src/Reducers/modal.js
diff --git a/src/react/Reducers/note_texts.js b/src/Reducers/note_texts.js
similarity index 100%
rename from src/react/Reducers/note_texts.js
rename to src/Reducers/note_texts.js
diff --git a/src/react/Reducers/oauth.js b/src/Reducers/oauth.js
similarity index 98%
rename from src/react/Reducers/oauth.js
rename to src/Reducers/oauth.js
index 277fef15..41a53209 100644
--- a/src/react/Reducers/oauth.js
+++ b/src/Reducers/oauth.js
@@ -5,7 +5,7 @@ import {
     OAUTH_CLIENT_DETAILS_SECRET,
     OAUTH_SANDBOX_CLIENT_DETAILS_ID,
     OAUTH_SANDBOX_CLIENT_DETAILS_SECRET
-} from "../Actions/oauth";
+} from "~actions/oauth";
 
 const storedClientId = store.get(OAUTH_CLIENT_DETAILS_ID);
 const storedClientSecret = store.get(OAUTH_CLIENT_DETAILS_SECRET);
diff --git a/src/react/Reducers/options.js b/src/Reducers/options.js
similarity index 99%
rename from src/react/Reducers/options.js
rename to src/Reducers/options.js
index 217b4285..a717f5f1 100644
--- a/src/react/Reducers/options.js
+++ b/src/Reducers/options.js
@@ -1,6 +1,6 @@
 import store from "store";
 import { ipcRenderer } from "electron";
-import settings from "../ImportWrappers/electronSettings";
+import settings from "~importwrappers/electronSettings";
 
 export const SYNC_ON_STARTUP_LOCATION = "BUNQDESKTOP_SYNC_ON_STARTUP";
 export const THEME_LOCATION = "BUNQDESKTOP_THEME";
diff --git a/src/react/Reducers/pagination.js b/src/Reducers/pagination.js
similarity index 100%
rename from src/react/Reducers/pagination.js
rename to src/Reducers/pagination.js
diff --git a/src/react/Reducers/pay.js b/src/Reducers/pay.js
similarity index 100%
rename from src/react/Reducers/pay.js
rename to src/Reducers/pay.js
diff --git a/src/react/Reducers/payment_filter.js b/src/Reducers/payment_filter.js
similarity index 100%
rename from src/react/Reducers/payment_filter.js
rename to src/Reducers/payment_filter.js
diff --git a/src/react/Reducers/payment_info.js b/src/Reducers/payment_info.js
similarity index 100%
rename from src/react/Reducers/payment_info.js
rename to src/Reducers/payment_info.js
diff --git a/src/react/Reducers/payments.js b/src/Reducers/payments.js
similarity index 92%
rename from src/react/Reducers/payments.js
rename to src/Reducers/payments.js
index 6bb954d0..a1409dad 100644
--- a/src/react/Reducers/payments.js
+++ b/src/Reducers/payments.js
@@ -1,8 +1,8 @@
 import store from "store";
-import MergeApiObjects from "../Functions/MergeApiObjects";
-import { storeEncryptString } from "../Functions/Crypto/CryptoWorkerWrapper";
+import MergeApiObjects from "~functions/MergeApiObjects";
+import { storeEncryptString } from "~functions/Crypto/CryptoWorkerWrapper";
 
-import { STORED_PAYMENTS } from "../Actions/payments";
+import { STORED_PAYMENTS } from "~actions/payments";
 
 export const defaultState = {
     payments: [],
diff --git a/src/react/Reducers/pending_payments.js b/src/Reducers/pending_payments.js
similarity index 95%
rename from src/react/Reducers/pending_payments.js
rename to src/Reducers/pending_payments.js
index 25a67536..04b58f18 100644
--- a/src/react/Reducers/pending_payments.js
+++ b/src/Reducers/pending_payments.js
@@ -1,7 +1,7 @@
 import store from "store";
-import { generateGUID } from "../Functions/Utils";
-import { storeEncryptString } from "../Functions/Crypto/CryptoWorkerWrapper";
-import { PENDING_PAYMENTS_LOCATION } from "../Actions/pending_payments";
+import { generateGUID } from "~functions/Utils";
+import { storeEncryptString } from "~functions/Crypto/CryptoWorkerWrapper";
+import { PENDING_PAYMENTS_LOCATION } from "~actions/pending_payments";
 
 export const defaultState = {
     last_updated: new Date(),
diff --git a/src/react/Reducers/queue.js b/src/Reducers/queue.js
similarity index 100%
rename from src/react/Reducers/queue.js
rename to src/Reducers/queue.js
diff --git a/src/react/Reducers/registration.js b/src/Reducers/registration.js
similarity index 100%
rename from src/react/Reducers/registration.js
rename to src/Reducers/registration.js
diff --git a/src/react/Reducers/request_filter.js b/src/Reducers/request_filter.js
similarity index 100%
rename from src/react/Reducers/request_filter.js
rename to src/Reducers/request_filter.js
diff --git a/src/react/Reducers/request_inquiries.js b/src/Reducers/request_inquiries.js
similarity index 93%
rename from src/react/Reducers/request_inquiries.js
rename to src/Reducers/request_inquiries.js
index 4d5e8cb2..14421c54 100644
--- a/src/react/Reducers/request_inquiries.js
+++ b/src/Reducers/request_inquiries.js
@@ -1,8 +1,8 @@
 import store from "store";
-import MergeApiObjects from "../Functions/MergeApiObjects";
-import { storeEncryptString } from "../Functions/Crypto/CryptoWorkerWrapper";
+import MergeApiObjects from "~functions/MergeApiObjects";
+import { storeEncryptString } from "~functions/Crypto/CryptoWorkerWrapper";
 
-import { STORED_REQUEST_INQUIRIES } from "../Actions/request_inquiries";
+import { STORED_REQUEST_INQUIRIES } from "~actions/request_inquiries";
 
 export const defaultState = {
     request_inquiries: [],
diff --git a/src/react/Reducers/request_inquiry.js b/src/Reducers/request_inquiry.js
similarity index 100%
rename from src/react/Reducers/request_inquiry.js
rename to src/Reducers/request_inquiry.js
diff --git a/src/react/Reducers/request_inquiry_batches.js b/src/Reducers/request_inquiry_batches.js
similarity index 93%
rename from src/react/Reducers/request_inquiry_batches.js
rename to src/Reducers/request_inquiry_batches.js
index 4a2e6883..919bef4a 100644
--- a/src/react/Reducers/request_inquiry_batches.js
+++ b/src/Reducers/request_inquiry_batches.js
@@ -1,8 +1,8 @@
 import store from "store";
-import MergeApiObjects from "../Functions/MergeApiObjects";
-import { storeEncryptString } from "../Functions/Crypto/CryptoWorkerWrapper";
+import MergeApiObjects from "~functions/MergeApiObjects";
+import { storeEncryptString } from "~functions/Crypto/CryptoWorkerWrapper";
 
-import { STORED_REQUEST_INQUIRY_BATCHES } from "../Actions/request_inquiry_batches";
+import { STORED_REQUEST_INQUIRY_BATCHES } from "~actions/request_inquiry_batches";
 
 export const defaultState = {
     request_inquiry_batches: [],
diff --git a/src/react/Reducers/request_inquiry_info.js b/src/Reducers/request_inquiry_info.js
similarity index 100%
rename from src/react/Reducers/request_inquiry_info.js
rename to src/Reducers/request_inquiry_info.js
diff --git a/src/react/Reducers/request_response.js b/src/Reducers/request_response.js
similarity index 100%
rename from src/react/Reducers/request_response.js
rename to src/Reducers/request_response.js
diff --git a/src/react/Reducers/request_response_info.js b/src/Reducers/request_response_info.js
similarity index 100%
rename from src/react/Reducers/request_response_info.js
rename to src/Reducers/request_response_info.js
diff --git a/src/react/Reducers/request_responses.js b/src/Reducers/request_responses.js
similarity index 93%
rename from src/react/Reducers/request_responses.js
rename to src/Reducers/request_responses.js
index bae57e92..ba1f1e0f 100644
--- a/src/react/Reducers/request_responses.js
+++ b/src/Reducers/request_responses.js
@@ -1,8 +1,8 @@
 import store from "store";
-import MergeApiObjects from "../Functions/MergeApiObjects";
-import { storeEncryptString } from "../Functions/Crypto/CryptoWorkerWrapper";
+import MergeApiObjects from "~functions/MergeApiObjects";
+import { storeEncryptString } from "~functions/Crypto/CryptoWorkerWrapper";
 
-import { STORED_REQUEST_RESPONSES } from "../Actions/request_responses";
+import { STORED_REQUEST_RESPONSES } from "~actions/request_responses";
 
 export const defaultState = {
     request_responses: [],
diff --git a/src/react/Reducers/savings_goals.js b/src/Reducers/savings_goals.js
similarity index 96%
rename from src/react/Reducers/savings_goals.js
rename to src/Reducers/savings_goals.js
index 593468d7..dfc502c2 100644
--- a/src/react/Reducers/savings_goals.js
+++ b/src/Reducers/savings_goals.js
@@ -1,6 +1,6 @@
-import settings from "../ImportWrappers/electronSettings";
-import { generateGUID } from "../Functions/Utils";
-import SavingsGoal from "../Models/SavingsGoal";
+import settings from "~importwrappers/electronSettings";
+import { generateGUID } from "~functions/Utils";
+import SavingsGoal from "~models/SavingsGoal";
 
 export const BUNQDESKTOP_SAVINGS_GOALS = "BUNQDESKTOP_SAVINGS_GOALS";
 
diff --git a/src/react/Reducers/scheduled_payments.js b/src/Reducers/scheduled_payments.js
similarity index 100%
rename from src/react/Reducers/scheduled_payments.js
rename to src/Reducers/scheduled_payments.js
diff --git a/src/react/Reducers/search_filter.js b/src/Reducers/search_filter.js
similarity index 100%
rename from src/react/Reducers/search_filter.js
rename to src/Reducers/search_filter.js
diff --git a/src/react/Reducers/share_invite_monetary_account_inquiries.js b/src/Reducers/share_invite_monetary_account_inquiries.js
similarity index 93%
rename from src/react/Reducers/share_invite_monetary_account_inquiries.js
rename to src/Reducers/share_invite_monetary_account_inquiries.js
index e09bd40a..c98f18f9 100644
--- a/src/react/Reducers/share_invite_monetary_account_inquiries.js
+++ b/src/Reducers/share_invite_monetary_account_inquiries.js
@@ -1,6 +1,6 @@
 import store from "store";
-import { STORED_SHARE_INVITE_MONETARY_ACCOUNT_INQUIRIES } from "../Actions/share_invite_monetary_account_inquiries";
-import { storeEncryptString } from "../Functions/Crypto/CryptoWorkerWrapper";
+import { STORED_SHARE_INVITE_MONETARY_ACCOUNT_INQUIRIES } from "~actions/share_invite_monetary_account_inquiries";
+import { storeEncryptString } from "~functions/Crypto/CryptoWorkerWrapper";
 
 export const defaultState = {
     share_invite_monetary_account_inquiries: [],
diff --git a/src/react/Reducers/share_invite_monetary_account_inquiry.js b/src/Reducers/share_invite_monetary_account_inquiry.js
similarity index 100%
rename from src/react/Reducers/share_invite_monetary_account_inquiry.js
rename to src/Reducers/share_invite_monetary_account_inquiry.js
diff --git a/src/react/Reducers/share_invite_monetary_account_responses.js b/src/Reducers/share_invite_monetary_account_responses.js
similarity index 93%
rename from src/react/Reducers/share_invite_monetary_account_responses.js
rename to src/Reducers/share_invite_monetary_account_responses.js
index f2f0a372..a0986cb3 100644
--- a/src/react/Reducers/share_invite_monetary_account_responses.js
+++ b/src/Reducers/share_invite_monetary_account_responses.js
@@ -1,6 +1,6 @@
 import store from "store";
-import { STORED_SHARE_INVITE_MONETARY_ACCOUNT_RESPONSES } from "../Actions/share_invite_monetary_account_responses";
-import { storeEncryptString } from "../Functions/Crypto/CryptoWorkerWrapper";
+import { STORED_SHARE_INVITE_MONETARY_ACCOUNT_RESPONSES } from "~actions/share_invite_monetary_account_responses";
+import { storeEncryptString } from "~functions/Crypto/CryptoWorkerWrapper";
 
 export const defaultState = {
     share_invite_monetary_account_responses: [],
diff --git a/src/react/Reducers/sidebar.js b/src/Reducers/sidebar.js
similarity index 100%
rename from src/react/Reducers/sidebar.js
rename to src/Reducers/sidebar.js
diff --git a/src/react/Reducers/user.js b/src/Reducers/user.js
similarity index 100%
rename from src/react/Reducers/user.js
rename to src/Reducers/user.js
diff --git a/src/react/Reducers/users.js b/src/Reducers/users.js
similarity index 100%
rename from src/react/Reducers/users.js
rename to src/Reducers/users.js
diff --git a/src/app.js b/src/app.js
deleted file mode 100644
index c376dfc5..00000000
--- a/src/app.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import "./helpers/context_menu.js";
-import "./helpers/external_links.js";
diff --git a/src/app.ts b/src/app.ts
new file mode 100644
index 00000000..3f22bc3e
--- /dev/null
+++ b/src/app.ts
@@ -0,0 +1,5 @@
+import "~helpers/context_menu";
+import "~helpers/external_links";
+import BunqDesktopClient from "~components/BunqDesktopClient";
+
+export type AppWindow = Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
diff --git a/src/background.js b/src/background.ts
similarity index 91%
rename from src/background.js
rename to src/background.ts
index 8f61173d..4ee03718 100644
--- a/src/background.js
+++ b/src/background.ts
@@ -5,19 +5,19 @@ import url from "url";
 import path from "path";
 import log from "electron-log";
 import settings from "electron-settings";
-import { devMenuTemplate } from "./menu/dev_menu_template";
-import { editMenuTemplate } from "./menu/edit_menu_template";
-import { helpMenuTemplate } from "./menu/help_menu_template";
-import { viewMenuTemplate } from "./menu/view_menu_template";
-import { windowMenuTemplate } from "./menu/window_menu_template";
-import darwinMenuTemplates from "./menu/darwin_menu_templates";
-import createWindow from "./helpers/window";
-import registerShortcuts from "./helpers/shortcuts";
-import registerTouchBar from "./helpers/touchbar";
-import setupTrayIcon from "./helpers/tray";
-import settingsHelper from "./helpers/settings";
-import oauth from "./helpers/oauth";
-import devTools from "./helpers/devtools";
+import { devMenuTemplate } from "~menu/dev_menu_template";
+import { editMenuTemplate } from "~menu/edit_menu_template";
+import { helpMenuTemplate } from "~menu/help_menu_template";
+import { viewMenuTemplate } from "~menu/view_menu_template";
+import { windowMenuTemplate } from "~menu/window_menu_template";
+import darwinMenuTemplates from "~menu/darwin_menu_templates";
+import createWindow from "~helpers/window";
+import registerShortcuts from "~helpers/shortcuts";
+import registerTouchBar from "~helpers/touchbar";
+import setupTrayIcon from "~helpers/tray";
+import settingsHelper from "~helpers/settings";
+import oauth from "~helpers/oauth";
+import devTools from "~helpers/devtools";
 import env from "./env";
 
 // disable security warnings since we need cross-origin requests
@@ -27,7 +27,7 @@ const platform = os.platform();
 let userDataPath = app.getPath("userData");
 
 const imagesDir = path.join(__dirname, `..${path.sep}app${path.sep}images${path.sep}`);
-let trayIcon = "";
+let trayIcon;
 if (platform === "darwin") {
     trayIcon = nativeImage.createFromPath(`${imagesDir}logoTemplate@1x.png`);
     trayIcon.setTemplateImage(true);
diff --git a/src/react/Components/AccountCard.jsx b/src/components/AccountCard.tsx
similarity index 91%
rename from src/react/Components/AccountCard.jsx
rename to src/components/AccountCard.tsx
index 735932ee..b5835d0c 100644
--- a/src/react/Components/AccountCard.jsx
+++ b/src/components/AccountCard.tsx
@@ -12,16 +12,20 @@ import DeleteIcon from "@material-ui/icons/Delete";
 import EditIcon from "@material-ui/icons/Edit";
 import LinkIcon from "@material-ui/icons/Link";
 import PeopleIcon from "@material-ui/icons/People";
+import BunqDesktopClient from "~components/BunqDesktopClient";
 
 import UploadFullscreen from "./FileUpload/UploadFullscreen";
 import LazyAttachmentImage from "./AttachmentImage/LazyAttachmentImage";
 import AccountQRFullscreen from "./QR/AccountQRFullscreen";
 import AliasList from "./AliasList";
 
-import { formatMoney } from "../Functions/Utils";
-import { connectGetBudget } from "../Functions/ConnectGetPermissions";
-import { openSnackbar } from "../Actions/snackbar";
-import { accountsUpdateImage } from "../Actions/accounts";
+import { formatMoney } from "~functions/Utils";
+import { connectGetBudget } from "~functions/ConnectGetPermissions";
+
+import { actions as snackbarActions } from "~store/snackbar";
+import { actions as accountsActions } from "~store/accounts";
+
+declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
 
 const styles = {
     avatar: {
@@ -169,9 +173,9 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, props) => {
     const { BunqJSClient } = props;
     return {
-        openSnackbar: message => dispatch(openSnackbar(message)),
+        openSnackbar: message => dispatch(snackbarActions.open( { message })),
         accountsUpdateImage: (userId, accountId, attachmentId, accountType) =>
-            dispatch(accountsUpdateImage(BunqJSClient, userId, accountId, attachmentId, accountType))
+            dispatch(accountsActions.updateImage(BunqJSClient, userId, accountId, attachmentId, accountType))
     };
 };
 
diff --git a/src/react/Components/AccountList/AccountAvatarCircularProgress.jsx b/src/components/AccountList/AccountAvatarCircularProgress.tsx
similarity index 93%
rename from src/react/Components/AccountList/AccountAvatarCircularProgress.jsx
rename to src/components/AccountList/AccountAvatarCircularProgress.tsx
index 87697125..0569ba10 100644
--- a/src/react/Components/AccountList/AccountAvatarCircularProgress.jsx
+++ b/src/components/AccountList/AccountAvatarCircularProgress.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { connect } from "react-redux";
 import CircularProgress from "@material-ui/core/CircularProgress";
 
@@ -25,7 +25,7 @@ const AccountAvatarCircularProgress = ({ account, theme, selected = false, style
     if (!isSavingsAccount) return null;
 
     return (
-        <React.Fragment>
+        <>
             <CircularProgress
                 variant="static"
                 value={savingsPercentage}
@@ -34,7 +34,7 @@ const AccountAvatarCircularProgress = ({ account, theme, selected = false, style
                     zIndex: 2,
                     left: selected ? 12 : 16,
                     ...style
-                }}
+                } as CSSProperties}
             />
             <div
                 style={{
@@ -42,7 +42,7 @@ const AccountAvatarCircularProgress = ({ account, theme, selected = false, style
                     zIndex: 1,
                     left: selected ? 12 : 16,
                     ...style
-                }}
+                } as CSSProperties}
             >
                 <svg viewBox="22 22 44 44">
                     <circle
@@ -59,7 +59,7 @@ const AccountAvatarCircularProgress = ({ account, theme, selected = false, style
                     />
                 </svg>
             </div>
-        </React.Fragment>
+        </>
     );
 };
 
diff --git a/src/react/Components/AccountList/AccountList.jsx b/src/components/AccountList/AccountList.tsx
similarity index 87%
rename from src/react/Components/AccountList/AccountList.jsx
rename to src/components/AccountList/AccountList.tsx
index 7e21abfa..c7bac120 100644
--- a/src/react/Components/AccountList/AccountList.jsx
+++ b/src/components/AccountList/AccountList.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { ipcRenderer } from "electron";
 import { translate } from "react-i18next";
 import { connect } from "react-redux";
@@ -14,28 +14,24 @@ import LinearProgress from "@material-ui/core/LinearProgress";
 import RefreshIcon from "@material-ui/icons/Refresh";
 import CheckBoxIcon from "@material-ui/icons/CheckBox";
 import CheckBoxOutlinedIcon from "@material-ui/icons/CheckBoxOutlined";
+import { accountsUpdate } from "~store/accounts/thunks";
 
 import LimitedPremiumListItem from "../LimitedPremiumListItem";
 import AccountListItem from "./AccountListItem";
 import AddAccount from "./AddAccount";
-import { formatMoney } from "../../Functions/Utils";
-import { connectGetBudget } from "../../Functions/ConnectGetPermissions";
-import { filterShareInviteMonetaryAccountResponses } from "../../Functions/DataFilters";
-
-import {
-    accountsSelectAccount,
-    accountsUpdate,
-    accountExcludeFromTotal,
-    accountIncludeInTotal
-} from "../../Actions/accounts";
-import { paymentInfoUpdate } from "../../Actions/payments";
-import { requestResponsesUpdate } from "../../Actions/request_responses";
-import { bunqMeTabsUpdate } from "../../Actions/bunq_me_tabs";
-import { masterCardActionsUpdate } from "../../Actions/master_card_actions";
-import { requestInquiriesUpdate } from "../../Actions/request_inquiries";
-import { updateStatisticsSavingsGoals } from "../../Actions/savings_goals";
-import { shareInviteMonetaryAccountResponsesInfoUpdate } from "../../Actions/share_invite_monetary_account_responses";
-import { shareInviteMonetaryAccountInquiriesInfoUpdate } from "../../Actions/share_invite_monetary_account_inquiries";
+import { formatMoney } from "~functions/Utils";
+import { connectGetBudget } from "~functions/ConnectGetPermissions";
+import { filterShareInviteMonetaryAccountResponses } from "~functions/DataFilters";
+
+import { paymentInfoUpdate } from "~actions/payments";
+import { requestResponsesUpdate } from "~actions/request_responses";
+import { masterCardActionsUpdate } from "~actions/master_card_actions";
+import { requestInquiriesUpdate } from "~actions/request_inquiries";
+import { updateStatisticsSavingsGoals } from "~actions/savings_goals";
+import { shareInviteMonetaryAccountResponsesInfoUpdate } from "~actions/share_invite_monetary_account_responses";
+import { shareInviteMonetaryAccountInquiriesInfoUpdate } from "~actions/share_invite_monetary_account_inquiries";
+import { actions as accountsActions } from "~store/accounts";
+import { actions as bunqMeTabsActions } from "~store/bunqMeTabs";
 
 const styles = {
     list: {
@@ -46,7 +42,9 @@ const styles = {
     }
 };
 
-class AccountList extends React.Component {
+class AccountList extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -63,7 +61,7 @@ class AccountList extends React.Component {
 
     componentDidUpdate(previousProps) {
         const { excludedAccountIds, shareInviteMonetaryAccountResponses, accounts } = this.props;
-        this.checkUpdateRequirement(this.props);
+        this.checkUpdateRequirement();
 
         const accountsTrayItems = [];
         const totalBalance = accounts
@@ -92,7 +90,7 @@ class AccountList extends React.Component {
 
                     // get budget from this response
                     if (filteredResponses.length > 0) {
-                        const connectBudget = connectGetBudget(filteredResponses);
+                        const connectBudget: any = connectGetBudget(filteredResponses);
 
                         if (connectBudget) {
                             accountTrayItem.balance = formatMoney(parseFloat(connectBudget));
@@ -222,7 +220,7 @@ class AccountList extends React.Component {
                           }
                         : false;
 
-                    let secondaryAction = false;
+                    let secondaryAction: false | React.ReactNode = false;
                     if (accountTotalSelectionMode) {
                         const excluded = excludedAccountIds.some(excludedAccountId => account.id === excludedAccountId);
 
@@ -257,7 +255,7 @@ class AccountList extends React.Component {
         }
 
         return (
-            <List dense={this.props.denseMode} style={styles.list}>
+            <List dense={this.props.denseMode} style={styles.list as CSSProperties}>
                 <ListItem dense>
                     <ListItemText
                         primary={`${t("Accounts")}: ${accounts.length}`}
@@ -274,26 +272,27 @@ class AccountList extends React.Component {
                 </ListItem>
 
                 {isBunqPromoUser && (
-                    <React.Fragment>
+                    <>
                         <Divider />
                         <LimitedPremiumListItem t={t} user={user} />
-                    </React.Fragment>
+                    </>
                 )}
 
                 {this.props.accountsLoading ? <LinearProgress /> : <Divider />}
                 {accounts}
 
                 {this.props.denseMode === false && this.props.limitedPermissions === false ? (
-                    <React.Fragment>
+                    <>
                         <AddAccount displayAddAccount={this.props.displayAddAccount} />
                         <Divider />
-                    </React.Fragment>
+                    </>
                 ) : null}
             </List>
         );
     }
 }
 
+// @ts-ignore
 AccountList.defaultProps = {
     denseMode: false
 };
@@ -339,18 +338,18 @@ const mapDispatchToProps = (dispatch, ownProps) => {
             dispatch(requestResponsesUpdate(BunqJSClient, userId, accountId)),
         masterCardActionsUpdate: (userId, accountId) =>
             dispatch(masterCardActionsUpdate(BunqJSClient, userId, accountId)),
-        bunqMeTabsUpdate: (userId, accountId) => dispatch(bunqMeTabsUpdate(BunqJSClient, userId, accountId)),
+        bunqMeTabsUpdate: (userId, accountId) => dispatch(bunqMeTabsActions.setInfo({ resetOldItems: false, BunqJSClient, user_id: userId, account_id: accountId })),
 
         accountsUpdate: userId => dispatch(accountsUpdate(BunqJSClient, userId)),
 
-        accountExcludeFromTotal: accountId => dispatch(accountExcludeFromTotal(accountId)),
-        accountIncludeInTotal: accountId => dispatch(accountIncludeInTotal(accountId)),
+        accountExcludeFromTotal: accountId => dispatch(accountsActions.excludeFromTotal(accountId)),
+        accountIncludeInTotal: accountId => dispatch(accountsActions.includeInTotal(accountId)),
 
         shareInviteMonetaryAccountResponsesInfoUpdate: userId =>
             dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(BunqJSClient, userId)),
         shareInviteMonetaryAccountInquiriesInfoUpdate: (userId, accountId) =>
             dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(BunqJSClient, userId, accountId)),
-        selectAccount: acountId => dispatch(accountsSelectAccount(acountId)),
+        selectAccount: accountId => dispatch(accountsActions.selectAccount(accountId)),
 
         updateStatisticsSavingsGoals: (accounts, shareInviteMonetaryAccountResponses) =>
             dispatch(updateStatisticsSavingsGoals(accounts, shareInviteMonetaryAccountResponses))
diff --git a/src/react/Components/AccountList/AccountListItem.jsx b/src/components/AccountList/AccountListItem.tsx
similarity index 88%
rename from src/react/Components/AccountList/AccountListItem.jsx
rename to src/components/AccountList/AccountListItem.tsx
index 2a1af2ef..9a4b9623 100644
--- a/src/react/Components/AccountList/AccountListItem.jsx
+++ b/src/components/AccountList/AccountListItem.tsx
@@ -1,25 +1,26 @@
-import React from "react";
-import { connect } from "react-redux";
+import React, { CSSProperties } from "react";
 import { translate } from "react-i18next";
-import ListItem from "@material-ui/core/ListItem";
-import ListItemText from "@material-ui/core/ListItemText";
-import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import { connect } from "react-redux";
 import Avatar from "@material-ui/core/Avatar";
 import IconButton from "@material-ui/core/IconButton";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
+import ListItemText from "@material-ui/core/ListItemText";
 
 import InfoIcon from "@material-ui/icons/InfoOutlined";
 import LinkIcon from "@material-ui/icons/Link";
 import PeopleIcon from "@material-ui/icons/People";
 
-import LazyAttachmentImage from "../../Components/AttachmentImage/LazyAttachmentImage";
-import NavLink from "../../Components/Routing/NavLink";
-import AccountAvatarCircularProgress from "./AccountAvatarCircularProgress";
+import { addAccountIdFilter, removeAccountIdFilter, toggleAccountIdFilter } from "~actions/filters";
+
+import LazyAttachmentImage from "~components/AttachmentImage/LazyAttachmentImage";
+import NavLink from "~components/Routing/NavLink";
+import { connectGetBudget } from "~functions/ConnectGetPermissions";
 
-import { formatMoney } from "../../Functions/Utils";
-import { connectGetBudget } from "../../Functions/ConnectGetPermissions";
+import { formatMoney } from "~functions/Utils";
+import AccountAvatarCircularProgress from "./AccountAvatarCircularProgress";
 
-import { accountsSelectAccount } from "../../Actions/accounts.js";
-import { addAccountIdFilter, removeAccountIdFilter, toggleAccountIdFilter } from "../../Actions/filters";
+import { actions as accountsActions } from "~store/accounts";
 
 const styles = {
     bigAvatar: {
@@ -40,7 +41,17 @@ const styles = {
     }
 };
 
-class AccountListItem extends React.Component {
+class AccountListItem extends React.Component<any> {
+    static defaultProps = {
+        clickable: true,
+        denseMode: false,
+        isJoint: false,
+        shareInviteMonetaryAccountResponses: [],
+        secondaryAction: false
+    };
+
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -99,7 +110,7 @@ class AccountListItem extends React.Component {
         }
 
         // check if any of the selected account ids are for this account
-        let displayStyle = {
+        let displayStyle: CSSProperties = {
             height: 83,
             paddingLeft: 20
         };
@@ -125,7 +136,7 @@ class AccountListItem extends React.Component {
             ? e => this.props.removeAccountIdFilter(account.id)
             : e => this.props.addAccountIdFilter(account.id);
 
-        const listItemProps = {};
+        const listItemProps: any = {};
         if (this.props.clickable) {
             listItemProps.button = true;
             listItemProps.onClick = this.props.onClick
@@ -174,7 +185,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        selectAccount: acountId => dispatch(accountsSelectAccount(acountId)),
+        selectAccount: accountId => dispatch(accountsActions.selectAccount(accountId)),
 
         addAccountIdFilter: accountId => dispatch(addAccountIdFilter(accountId)),
         removeAccountIdFilter: index => dispatch(removeAccountIdFilter(index)),
@@ -182,12 +193,4 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     };
 };
 
-AccountListItem.defaultProps = {
-    clickable: true,
-    denseMode: false,
-    isJoint: false,
-    shareInviteMonetaryAccountResponses: [],
-    secondaryAction: false
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(translate("translations")(AccountListItem));
diff --git a/src/react/Components/AccountList/AccountListItemChip.jsx b/src/components/AccountList/AccountListItemChip.tsx
similarity index 93%
rename from src/react/Components/AccountList/AccountListItemChip.jsx
rename to src/components/AccountList/AccountListItemChip.tsx
index b1ea41a6..b25820b3 100644
--- a/src/react/Components/AccountList/AccountListItemChip.jsx
+++ b/src/components/AccountList/AccountListItemChip.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Avatar from "@material-ui/core/Avatar";
 import Chip from "@material-ui/core/Chip";
 
-import LazyAttachmentImage from "../../Components/AttachmentImage/LazyAttachmentImage";
+import LazyAttachmentImage from "~components/AttachmentImage/LazyAttachmentImage";
 
 export default props => {
     const {
diff --git a/src/react/Components/AccountList/AddAccount.jsx b/src/components/AccountList/AddAccount.tsx
similarity index 94%
rename from src/react/Components/AccountList/AddAccount.jsx
rename to src/components/AccountList/AddAccount.tsx
index 80c98f2a..fb613c56 100644
--- a/src/react/Components/AccountList/AddAccount.jsx
+++ b/src/components/AccountList/AddAccount.tsx
@@ -5,7 +5,7 @@ import ListItemText from "@material-ui/core/ListItemText";
 import Avatar from "@material-ui/core/Avatar";
 import AddBoxIcon from "@material-ui/icons/AddBox";
 
-import NavLink from "../../Components/Routing/NavLink";
+import NavLink from "~components/Routing/NavLink";
 import { translate } from "react-i18next";
 
 const styles = {
diff --git a/src/react/Components/AliasList.jsx b/src/components/AliasList.tsx
similarity index 86%
rename from src/react/Components/AliasList.jsx
rename to src/components/AliasList.tsx
index 8daf8cf7..0429ef5e 100644
--- a/src/react/Components/AliasList.jsx
+++ b/src/components/AliasList.tsx
@@ -9,10 +9,10 @@ import EmailIcon from "@material-ui/icons/Email";
 import PersonIcon from "@material-ui/icons/Person";
 import UrlIcon from "@material-ui/icons/Link";
 
-import { formatIban } from "../Functions/Utils";
-import CopyToClipboardWrap from "../Components/CopyToClipboardWrap";
+import { formatIban } from "~functions/Utils";
+import CopyToClipboardWrap from "~components/CopyToClipboardWrap";
 
-export default ({ aliasses, copiedValue = () => {} }) => {
+export default ({ aliasses, copiedValue = () => {} }: { aliasses: any[]; copiedValue: Function }) => {
     return aliasses.map(alias => {
         let value = alias.value;
         let icon = <PersonIcon />;
diff --git a/src/react/App.jsx b/src/components/App.tsx
similarity index 70%
rename from src/react/App.jsx
rename to src/components/App.tsx
index 29a03c60..b1b273da 100644
--- a/src/react/App.jsx
+++ b/src/components/App.tsx
@@ -1,18 +1,24 @@
+import BunqJSClient from "@bunq-community/bunq-js-client";
 import React from "react";
 import { Provider } from "react-redux";
 import { HashRouter } from "react-router-dom";
 import DateFnsUtils from "material-ui-pickers/utils/date-fns-utils";
 import MuiPickersUtilsProvider from "material-ui-pickers/MuiPickersUtilsProvider";
 
-import Routes from "./Routes.jsx";
-import Layout from "./Components/Layout";
-import ErrorBoundary from "./Components/ErrorBoundary";
-import Store from "./Store.jsx";
+import Routes from "./Routes";
+import Layout from "~components/Layout";
+import ErrorBoundary from "~components/ErrorBoundary";
+import store from "~store/index";
 
 // include translations setup
 import "./i18n";
 
-export default class App extends React.Component {
+export interface IProps {
+    analytics: boolean;
+    BunqJSClient: BunqJSClient;
+}
+
+export default class App extends React.Component<IProps> {
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -22,7 +28,7 @@ export default class App extends React.Component {
         return (
             <ErrorBoundary>
                 <MuiPickersUtilsProvider utils={DateFnsUtils}>
-                    <Provider store={Store()}>
+                    <Provider store={store}>
                         <HashRouter>
                             <Layout
                                 routesComponent={Routes}
diff --git a/src/react/Components/AttachmentImage/AttachmentImage.jsx b/src/components/AttachmentImage/AttachmentImage.tsx
similarity index 89%
rename from src/react/Components/AttachmentImage/AttachmentImage.jsx
rename to src/components/AttachmentImage/AttachmentImage.tsx
index eea293be..428c31c2 100644
--- a/src/react/Components/AttachmentImage/AttachmentImage.jsx
+++ b/src/components/AttachmentImage/AttachmentImage.tsx
@@ -1,7 +1,15 @@
 import React from "react";
-import Logger from "../../Functions/Logger";
+import BunqDesktopClient from "~components/BunqDesktopClient";
+import Logger from "~functions/Logger";
+
+declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+
+class AttachmentImage extends React.PureComponent<any> {
+    state: any;
+    _isMounted: boolean;
+    timeout: number;
+    imageUrl: false | string;
 
-class AttachmentImage extends React.PureComponent {
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -44,7 +52,7 @@ class AttachmentImage extends React.PureComponent {
         }
 
         // set a timeout as a fallback incase loading the image takes too long
-        this.timeout = setTimeout(() => {
+        this.timeout = +setTimeout(() => {
             if (this.state.imageUrl === false) {
                 // still no image, fallback to temporary placeholder
                 this.setState({
diff --git a/src/react/Components/AttachmentImage/LazyAttachmentImage.jsx b/src/components/AttachmentImage/LazyAttachmentImage.tsx
similarity index 92%
rename from src/react/Components/AttachmentImage/LazyAttachmentImage.jsx
rename to src/components/AttachmentImage/LazyAttachmentImage.tsx
index 46ed878d..bf695c19 100644
--- a/src/react/Components/AttachmentImage/LazyAttachmentImage.jsx
+++ b/src/components/AttachmentImage/LazyAttachmentImage.tsx
@@ -2,7 +2,9 @@ import React from "react";
 import VisibilitySensor from "react-visibility-sensor";
 import AttachmentImage from "./AttachmentImage";
 
-class LazyAttachmentImage extends React.PureComponent {
+class LazyAttachmentImage extends React.PureComponent<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
diff --git a/src/react/BunqDesktopClient.ts b/src/components/BunqDesktopClient.ts
similarity index 98%
rename from src/react/BunqDesktopClient.ts
rename to src/components/BunqDesktopClient.ts
index e5fb0d5f..a20dcc73 100644
--- a/src/react/BunqDesktopClient.ts
+++ b/src/components/BunqDesktopClient.ts
@@ -1,12 +1,12 @@
 import BunqJSClient from "@bunq-community/bunq-js-client";
 import StorageInterface from "@bunq-community/bunq-js-client/dist/Interfaces/StorageInterface";
 import awaiting from "awaiting";
-import { Environment, StoredApiKey } from "./Types/Types";
+import { Environment, StoredApiKey } from "~types/Types";
 
-import { decryptString, derivePasswordKey, encryptString } from "./Functions/Crypto/Crypto";
-import { storeDecryptString, storeEncryptString } from "./Functions/Crypto/CryptoWorkerWrapper";
-import Logger from "./Functions/Logger";
-import localforage from "./ImportWrappers/localforage";
+import { decryptString, derivePasswordKey, encryptString } from "~functions/Crypto/Crypto";
+import { storeDecryptString, storeEncryptString } from "~functions/Crypto/CryptoWorkerWrapper";
+import Logger from "~functions/Logger";
+import localforage from "~importwrappers/localforage";
 import store from "store/dist/store.legacy";
 
 export const SALT_LOCATION = "BUNQDESKTOP_PASSWORD_SALT";
diff --git a/src/react/Components/BunqMeTabList.jsx b/src/components/BunqMeTabList.tsx
similarity index 92%
rename from src/react/Components/BunqMeTabList.jsx
rename to src/components/BunqMeTabList.tsx
index 7c2e66d8..292b98e8 100644
--- a/src/react/Components/BunqMeTabList.jsx
+++ b/src/components/BunqMeTabList.tsx
@@ -16,10 +16,10 @@ import UrlIcon from "@material-ui/icons/Link";
 
 import BunqMeTabListItem from "./ListItems/BunqMeTabListItem";
 
-import { openSnackbar } from "../Actions/snackbar";
-import { bunqMeTabPut } from "../Actions/bunq_me_tab";
+import { actions as snackbarActions } from "~store/snackbar";
+import { bunqMeTabPut } from "~store/bunqMeTab/thunks";
 
-const styles = {
+const styles: any = {
     list: {
         textAlign: "left"
     },
@@ -29,7 +29,13 @@ const styles = {
     }
 };
 
-class BunqMeTabList extends React.Component {
+class BunqMeTabList extends React.Component<any> {
+    static defaultProps = {
+        secondaryActions: null
+    };
+
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -114,14 +120,10 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, props) => {
     const { BunqJSClient } = props;
     return {
-        openSnackbar: message => dispatch(openSnackbar(message)),
+        openSnackbar: message => dispatch(snackbarActions.open(message)),
         bunqMeTabPut: (userId, accountId, tabId, status) =>
             dispatch(bunqMeTabPut(BunqJSClient, userId, accountId, tabId, status))
     };
 };
 
-BunqMeTabList.defaultProps = {
-    secondaryActions: null
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(BunqMeTabList);
diff --git a/src/react/Components/Categories/CategoryChip.jsx b/src/components/Categories/CategoryChip.tsx
similarity index 97%
rename from src/react/Components/Categories/CategoryChip.jsx
rename to src/components/Categories/CategoryChip.tsx
index d5197fab..e8165955 100644
--- a/src/react/Components/Categories/CategoryChip.jsx
+++ b/src/components/Categories/CategoryChip.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Avatar from "@material-ui/core/Avatar";
 import Chip from "@material-ui/core/Chip";
+
 import CustomIcon from "../CustomIcon";
 
 export default props => {
@@ -13,7 +14,7 @@ export default props => {
         onDelete
     } = props;
 
-    const chipProps = {
+    const chipProps: any = {
         style: style,
         label: category.label
     };
diff --git a/src/react/Components/Categories/CategoryChips.jsx b/src/components/Categories/CategoryChips.tsx
similarity index 79%
rename from src/react/Components/Categories/CategoryChips.jsx
rename to src/components/Categories/CategoryChips.tsx
index 03a73d6a..54601647 100644
--- a/src/react/Components/Categories/CategoryChips.jsx
+++ b/src/components/Categories/CategoryChips.tsx
@@ -11,7 +11,22 @@ const style = {
     justifyContent: "center"
 };
 
-class CategoryChips extends React.PureComponent {
+class CategoryChips extends React.PureComponent<any> {
+    static defaultProps = {
+        chipStyle: {
+            margin: 5
+        },
+        // when true this list will show all categories which do NOT match the item id
+        reverseChips: false,
+        onClick: false,
+        onDelete: false,
+        // overwrite the categories set in redux with a custom set
+        customCategories: false,
+        style: style
+    };
+
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -48,19 +63,6 @@ class CategoryChips extends React.PureComponent {
     }
 }
 
-CategoryChips.defaultProps = {
-    chipStyle: {
-        margin: 5
-    },
-    // when true this list will show all categories which do NOT match the item id
-    reverseChips: false,
-    onClick: false,
-    onDelete: false,
-    // overwrite the categories set in redux with a custom set
-    customCategories: false,
-    style: style
-};
-
 const mapStateToProps = state => {
     return {
         categories: state.categories.categories,
diff --git a/src/react/Components/Categories/CategoryEditor.jsx b/src/components/Categories/CategoryEditor.tsx
similarity index 89%
rename from src/react/Components/Categories/CategoryEditor.jsx
rename to src/components/Categories/CategoryEditor.tsx
index a166859d..8714b711 100644
--- a/src/react/Components/Categories/CategoryEditor.jsx
+++ b/src/components/Categories/CategoryEditor.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
@@ -13,9 +13,9 @@ import ColorPicker from "../FormFields/ColorPicker";
 import TranslateButton from "../TranslationHelpers/Button";
 import TranslateTypography from "../TranslationHelpers/Typography";
 
-import { setCategory } from "../../Actions/categories";
+import { actions as categoriesActions } from "~store/categories";
 
-const styles = {
+const styles: any = {
     titles: { textAlign: "center" },
     iconPicker: {
         width: "100%"
@@ -40,7 +40,22 @@ const styles = {
     }
 };
 
-class CategoryEditor extends React.Component {
+export interface IProps {
+    style: CSSProperties;
+    deselectChip: Function;
+    setCategory: Function;
+    selectedCategoryId: boolean | string;
+    categories: any;
+    t: Function;
+}
+
+class CategoryEditor extends React.Component<IProps> {
+    static defaultProps = {
+        style: {},
+    };
+
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -59,10 +74,10 @@ class CategoryEditor extends React.Component {
 
     componentDidUpdate() {
         if (this.state.categoryId !== this.props.selectedCategoryId) {
-            const stateChanges = {
+            const stateChanges: any = {
                 categoryId: this.props.selectedCategoryId
             };
-            if (this.props.selectedCategoryId && this.props.categories[this.props.selectedCategoryId]) {
+            if (typeof this.props.selectedCategoryId === 'string' && this.props.categories[this.props.selectedCategoryId]) {
                 const categoryInfo = this.props.categories[this.props.selectedCategoryId];
                 stateChanges.label = categoryInfo.label;
                 stateChanges.icon = categoryInfo.icon;
@@ -85,7 +100,7 @@ class CategoryEditor extends React.Component {
     labelChange = event => {
         const labelValue = event.target.value;
 
-        const stateChanges = {
+        const stateChanges: any = {
             labelError: false
         };
         if (labelValue.length <= 24) {
@@ -212,16 +227,6 @@ class CategoryEditor extends React.Component {
     }
 }
 
-CategoryEditor.defaultProps = {
-    style: {}
-};
-
-CategoryEditor.propTypes = {
-    style: PropTypes.object,
-    deselectChip: PropTypes.func,
-    selectedCategoryId: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
-};
-
 const mapStateToProps = state => {
     return {
         categories: state.categories.categories,
@@ -232,7 +237,7 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        setCategory: (...params) => dispatch(setCategory(...params))
+        setCategory: (categoryId, label, color, icon, priority) => dispatch(categoriesActions.setCategory({ id: categoryId, label, color, icon, priority })),
     };
 };
 
diff --git a/src/react/Components/Categories/CategoryHelper.js b/src/components/Categories/CategoryHelper.ts
similarity index 100%
rename from src/react/Components/Categories/CategoryHelper.js
rename to src/components/Categories/CategoryHelper.ts
diff --git a/src/react/Components/Categories/CategoryIcon.jsx b/src/components/Categories/CategoryIcon.tsx
similarity index 100%
rename from src/react/Components/Categories/CategoryIcon.jsx
rename to src/components/Categories/CategoryIcon.tsx
diff --git a/src/react/Components/Categories/CategoryIcons.jsx b/src/components/Categories/CategoryIcons.tsx
similarity index 100%
rename from src/react/Components/Categories/CategoryIcons.jsx
rename to src/components/Categories/CategoryIcons.tsx
diff --git a/src/react/Components/Categories/CategorySelector.jsx b/src/components/Categories/CategorySelector.tsx
similarity index 81%
rename from src/react/Components/Categories/CategorySelector.jsx
rename to src/components/Categories/CategorySelector.tsx
index 8417f7cd..d82d5f6a 100644
--- a/src/react/Components/Categories/CategorySelector.jsx
+++ b/src/components/Categories/CategorySelector.tsx
@@ -8,7 +8,7 @@ import Collapse from "@material-ui/core/Collapse";
 import TranslateButton from "../TranslationHelpers/Button";
 
 import CategoryChips from "./CategoryChips";
-import { removeCategoryConnection, setCategoryConnection } from "../../Actions/categories";
+import { actions as categoriesActions } from "~store/categories";
 
 const styles = {
     title: { textAlign: "center" },
@@ -17,7 +17,14 @@ const styles = {
     }
 };
 
-class CategorySelector extends React.Component {
+class CategorySelector extends React.Component<any> {
+    static defaultProps = {
+        style: {},
+        displayToggleButton: true
+    };
+
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -48,12 +55,12 @@ class CategorySelector extends React.Component {
     };
 
     render() {
-        const { item, type, displayToggleButton, t } = this.props;
+        const { item, type, displayToggleButton } = this.props;
         if (!item[type]) return null;
         const itemInfo = item[type];
 
         // don't allow the delete button by default
-        const categoryChipProps = {
+        const categoryChipProps: any = {
             type: type,
             id: itemInfo.id
         };
@@ -89,11 +96,6 @@ class CategorySelector extends React.Component {
     }
 }
 
-CategorySelector.defaultProps = {
-    style: {},
-    displayToggleButton: true
-};
-
 const mapStateToProps = state => {
     return {
         categories: state.categories.categories,
@@ -104,8 +106,8 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        setCategoryConnection: (...params) => dispatch(setCategoryConnection(...params)),
-        removeCategoryConnection: (...params) => dispatch(removeCategoryConnection(...params))
+        setCategoryConnection: (id, type, itemInfo) => dispatch(categoriesActions.setCategoryConnection({ category_id: id, item_type: type, item_id: itemInfo })),
+        removeCategoryConnection: (id, type, itemInfo) => dispatch(categoriesActions.removeCategoryConnection({ category_id: id, item_type: type, item_id: itemInfo }))
     };
 };
 
diff --git a/src/react/Components/Categories/CategorySelectorDialog.jsx b/src/components/Categories/CategorySelectorDialog.tsx
similarity index 87%
rename from src/react/Components/Categories/CategorySelectorDialog.jsx
rename to src/components/Categories/CategorySelectorDialog.tsx
index 8dd0dad0..ec53ceca 100644
--- a/src/react/Components/Categories/CategorySelectorDialog.jsx
+++ b/src/components/Categories/CategorySelectorDialog.tsx
@@ -4,11 +4,13 @@ import DialogContent from "@material-ui/core/DialogContent";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import Dialog from "@material-ui/core/Dialog";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
+import TranslateButton from "~components/TranslationHelpers/Button";
 
 import CategorySelector from "./CategorySelector";
 
-class CategorySelectorDialog extends React.Component {
+class CategorySelectorDialog extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {};
diff --git a/src/react/Components/Categories/PrioritySorter.js b/src/components/Categories/PrioritySorter.ts
similarity index 100%
rename from src/react/Components/Categories/PrioritySorter.js
rename to src/components/Categories/PrioritySorter.ts
diff --git a/src/react/Components/CodeSplitting/ComponentLoader.jsx b/src/components/CodeSplitting/ComponentLoader.tsx
similarity index 100%
rename from src/react/Components/CodeSplitting/ComponentLoader.jsx
rename to src/components/CodeSplitting/ComponentLoader.tsx
diff --git a/src/react/Components/CodeSplitting/Loading.jsx b/src/components/CodeSplitting/Loading.tsx
similarity index 81%
rename from src/react/Components/CodeSplitting/Loading.jsx
rename to src/components/CodeSplitting/Loading.tsx
index 54da1773..f74a793f 100644
--- a/src/react/Components/CodeSplitting/Loading.jsx
+++ b/src/components/CodeSplitting/Loading.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Logger from "../../Functions/Logger";
+import Logger from "~functions/Logger";
 
 export default ({ isLoading, pastDelay, error }) => {
     if (isLoading && pastDelay) {
@@ -8,7 +8,7 @@ export default ({ isLoading, pastDelay, error }) => {
     } else if (error && !isLoading) {
         // failed to load the component
         console.error(error);
-        Logger.error("Failed to load", error);
+        Logger.error("Failed to load");
         throw error;
     } else {
         // during loading
diff --git a/src/react/Components/CombinedList/CombinedList.jsx b/src/components/CombinedList/CombinedList.tsx
similarity index 96%
rename from src/react/Components/CombinedList/CombinedList.jsx
rename to src/components/CombinedList/CombinedList.tsx
index 80ed5cf0..59404e30 100644
--- a/src/react/Components/CombinedList/CombinedList.jsx
+++ b/src/components/CombinedList/CombinedList.tsx
@@ -10,15 +10,14 @@ import ListSubheader from "@material-ui/core/ListSubheader";
 import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 
 import InfoIcon from "@material-ui/icons/Info";
+import { bunqMeTabPut } from "~store/bunqMeTab/thunks";
 
 import ClearBtn from "../FilterComponents/ClearFilter";
 import FilterDrawer from "../FilterComponents/FilterDrawer";
 import ListControls from "./ListControls";
 import EventData from "./EventData";
 
-import { openSnackbar } from "../../Actions/snackbar";
-import { bunqMeTabPut } from "../../Actions/bunq_me_tab";
-import { nextPage, previousPage, setPage, setPageSize, firstPage } from "../../Actions/pagination";
+import { nextPage, previousPage, setPage, setPageSize, firstPage } from "~actions/pagination";
 
 import {
     paymentMapper,
@@ -30,10 +29,12 @@ import {
     shareInviteMonetaryAccountInquiryMapper,
     shareInviteMonetaryAccountResponseMapper
 } from "./MapperFunctions";
-import { humanReadableDate } from "../../Functions/Utils";
-import FilterDisabledChecker from "../../Functions/FilterDisabledChecker";
+import { humanReadableDate } from "~functions/Utils";
+import FilterDisabledChecker from "~functions/FilterDisabledChecker";
 
-const styles = {
+import { actions as snackbarActions } from "~store/snackbar";
+
+const styles: any = {
     button: {
         width: "100%"
     },
@@ -59,7 +60,13 @@ const styles = {
 
 const STORED_SCROLL_POSITION = "STORED_SCROLL_POSITION";
 
-class CombinedList extends React.Component {
+class CombinedList extends React.Component<any> {
+    static defaultProps = {
+        hiddenTypes: []
+    };
+
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -142,7 +149,7 @@ class CombinedList extends React.Component {
             ...shareInviteBankInquiries,
             ...payments
         ].sort(function(a, b) {
-            return new Date(b.filterDate) - new Date(a.filterDate);
+            return +new Date(b.filterDate) - +new Date(a.filterDate);
         });
 
         this.setState(
@@ -410,7 +417,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        openSnackbar: message => dispatch(openSnackbar(message)),
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
         bunqMeTabPut: (userId, accountId, tabId, status) =>
             dispatch(bunqMeTabPut(BunqJSClient, userId, accountId, tabId, status)),
         firstPage: () => dispatch(firstPage()),
@@ -421,8 +428,4 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     };
 };
 
-CombinedList.defaultProps = {
-    hiddenTypes: []
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(translate("translations")(CombinedList));
diff --git a/src/react/Components/CombinedList/EventData.jsx b/src/components/CombinedList/EventData.tsx
similarity index 98%
rename from src/react/Components/CombinedList/EventData.jsx
rename to src/components/CombinedList/EventData.tsx
index a5b6c1da..2057f580 100644
--- a/src/react/Components/CombinedList/EventData.jsx
+++ b/src/components/CombinedList/EventData.tsx
@@ -9,7 +9,7 @@ import IncomingIcon from "@material-ui/icons/KeyboardArrowDown";
 import OutgoingIcon from "@material-ui/icons/KeyboardArrowUp";
 import ChangeIcon from "@material-ui/icons/CompareArrows";
 
-import { formatMoney } from "../../Functions/Utils";
+import { formatMoney } from "~functions/Utils";
 
 const styles = {
     gridContainer: {
diff --git a/src/react/Components/CombinedList/ListControls.jsx b/src/components/CombinedList/ListControls.tsx
similarity index 100%
rename from src/react/Components/CombinedList/ListControls.jsx
rename to src/components/CombinedList/ListControls.tsx
diff --git a/src/react/Components/CombinedList/MapperFunctions.jsx b/src/components/CombinedList/MapperFunctions.tsx
similarity index 99%
rename from src/react/Components/CombinedList/MapperFunctions.jsx
rename to src/components/CombinedList/MapperFunctions.tsx
index b36542ce..52b9527a 100644
--- a/src/react/Components/CombinedList/MapperFunctions.jsx
+++ b/src/components/CombinedList/MapperFunctions.tsx
@@ -9,7 +9,7 @@ import RequestInquiryBatchListItem from "../ListItems/RequestInquiryBatchListIte
 import ShareInviteMonetaryAccountInquiryListItem from "../ListItems/ShareInviteMonetaryAccountInquiryListItem";
 import ShareInviteMonetaryAccountResponseListItem from "../ListItems/ShareInviteMonetaryAccountResponseListItem";
 
-import { UTCDateToLocalDate } from "../../Functions/Utils";
+import { UTCDateToLocalDate } from "~functions/Utils";
 import {
     paymentFilter,
     bunqMeTabsFilter,
@@ -19,7 +19,7 @@ import {
     requestResponseFilter,
     shareInviteMonetaryAccountInquiryFilter,
     shareInviteMonetaryAccountResponseFilter
-} from "../../Functions/DataFilters";
+} from "~functions/DataFilters";
 
 export const paymentMapper = (settings, hiddenPaymentIds = []) => {
     if (settings.hiddenTypes.includes("Payment")) return [];
diff --git a/src/react/Components/CopyToClipboardWrap.jsx b/src/components/CopyToClipboardWrap.tsx
similarity index 100%
rename from src/react/Components/CopyToClipboardWrap.jsx
rename to src/components/CopyToClipboardWrap.tsx
diff --git a/src/react/Components/CustomIcon.jsx b/src/components/CustomIcon.tsx
similarity index 100%
rename from src/react/Components/CustomIcon.jsx
rename to src/components/CustomIcon.tsx
diff --git a/src/react/Components/CustomSVG/FileDownload.jsx b/src/components/CustomSVG/FileDownload.tsx
similarity index 100%
rename from src/react/Components/CustomSVG/FileDownload.jsx
rename to src/components/CustomSVG/FileDownload.tsx
diff --git a/src/react/Components/CustomSVG/FileUpload.jsx b/src/components/CustomSVG/FileUpload.tsx
similarity index 100%
rename from src/react/Components/CustomSVG/FileUpload.jsx
rename to src/components/CustomSVG/FileUpload.tsx
diff --git a/src/react/Components/CustomSVG/Maximize.jsx b/src/components/CustomSVG/Maximize.tsx
similarity index 100%
rename from src/react/Components/CustomSVG/Maximize.jsx
rename to src/components/CustomSVG/Maximize.tsx
diff --git a/src/react/Components/CustomSVG/Minimize.jsx b/src/components/CustomSVG/Minimize.tsx
similarity index 100%
rename from src/react/Components/CustomSVG/Minimize.jsx
rename to src/components/CustomSVG/Minimize.tsx
diff --git a/src/react/Components/CustomSVG/Restore.jsx b/src/components/CustomSVG/Restore.tsx
similarity index 100%
rename from src/react/Components/CustomSVG/Restore.jsx
rename to src/components/CustomSVG/Restore.tsx
diff --git a/src/react/Components/CustomSVG/Trophy.jsx b/src/components/CustomSVG/Trophy.tsx
similarity index 100%
rename from src/react/Components/CustomSVG/Trophy.jsx
rename to src/components/CustomSVG/Trophy.tsx
diff --git a/src/react/Components/ErrorBoundary.jsx b/src/components/ErrorBoundary.tsx
similarity index 87%
rename from src/react/Components/ErrorBoundary.jsx
rename to src/components/ErrorBoundary.tsx
index 12f4d22c..b815d8d1 100644
--- a/src/react/Components/ErrorBoundary.jsx
+++ b/src/components/ErrorBoundary.tsx
@@ -1,11 +1,13 @@
 import React from "react";
 import Typography from "@material-ui/core/Typography";
 
-import Logger from "../Functions/Logger";
+import Logger from "~functions/Logger";
 import TranslateButton from "./TranslationHelpers/Button";
 import TranslateTypography from "./TranslationHelpers/Typography";
 
-export default class ErrorBoundary extends React.Component {
+export default class ErrorBoundary extends React.Component<any> {
+    state: any;
+
     constructor(props) {
         super(props);
         this.state = { hasError: false, error: null, errorInfo: null };
@@ -33,11 +35,11 @@ export default class ErrorBoundary extends React.Component {
                         {this.state.error.stack}
                     </Typography>
                     <br />
-                    {this.props.recoverableError === true ? (
+                    {!!this.props.recoverableError && (
                         <TranslateButton variant="contained" color="primary" onClick={this.clearError}>
                             Return to dashboard
                         </TranslateButton>
-                    ) : null}
+                    )}
                 </div>
             );
         }
diff --git a/src/react/Components/ExportDialog.jsx b/src/components/ExportDialog.tsx
similarity index 92%
rename from src/react/Components/ExportDialog.jsx
rename to src/components/ExportDialog.tsx
index 58ae66c0..5d54339f 100644
--- a/src/react/Components/ExportDialog.jsx
+++ b/src/components/ExportDialog.tsx
@@ -7,8 +7,8 @@ import Slide from "@material-ui/core/Slide";
 
 import TranslateButton from "./TranslationHelpers/Button";
 import ReactJsonWrapper from "./ReactJsonWrapper";
-import { anonymizeObject } from "../Functions/Utils";
-import CopyToClipboardWrap from "../Components/CopyToClipboardWrap";
+import { anonymizeObject } from "~functions/Utils";
+import CopyToClipboardWrap from "~components/CopyToClipboardWrap";
 
 const Transition = props => <Slide direction="right" {...props} />;
 
@@ -18,7 +18,9 @@ const styles = {
     }
 };
 
-export default class ExportDialog extends React.Component {
+export default class ExportDialog extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
diff --git a/src/react/Components/FileUpload/FilePicker.jsx b/src/components/FileUpload/FilePicker.tsx
similarity index 100%
rename from src/react/Components/FileUpload/FilePicker.jsx
rename to src/components/FileUpload/FilePicker.tsx
diff --git a/src/react/Components/FileUpload/UploadFullscreen.jsx b/src/components/FileUpload/UploadFullscreen.tsx
similarity index 95%
rename from src/react/Components/FileUpload/UploadFullscreen.jsx
rename to src/components/FileUpload/UploadFullscreen.tsx
index 173e1905..d68b91db 100644
--- a/src/react/Components/FileUpload/UploadFullscreen.jsx
+++ b/src/components/FileUpload/UploadFullscreen.tsx
@@ -4,11 +4,12 @@ import { translate } from "react-i18next";
 import Dialog from "@material-ui/core/Dialog";
 import Typography from "@material-ui/core/Typography";
 import Slide from "@material-ui/core/Slide";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
+import TranslateButton from "~components/TranslationHelpers/Button";
 
 import FilePicker from "./FilePicker";
 
-import { openSnackbar } from "../../Actions/snackbar";
+import { actions as snackbarActions } from "~store/snackbar";
+
 
 const Transition = props => <Slide direction={"up"} {...props} />;
 
@@ -151,7 +152,7 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        openSnackbar: message => dispatch(openSnackbar(message))
+        openSnackbar: message => dispatch(snackbarActions.open({ message }))
     };
 };
 
diff --git a/src/react/Components/FilterComponents/AccountSelection.jsx b/src/components/FilterComponents/AccountSelection.tsx
similarity index 98%
rename from src/react/Components/FilterComponents/AccountSelection.jsx
rename to src/components/FilterComponents/AccountSelection.tsx
index 7df81f48..82e89dad 100644
--- a/src/react/Components/FilterComponents/AccountSelection.jsx
+++ b/src/components/FilterComponents/AccountSelection.tsx
@@ -15,7 +15,7 @@ import FilterListIcon from "@material-ui/icons/FilterList";
 
 import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
 
-import { addAccountIdFilter, removeAccountIdFilter, toggleAccountIdFilter } from "../../Actions/filters";
+import { addAccountIdFilter, removeAccountIdFilter, toggleAccountIdFilter } from "~actions/filters";
 
 const styles = {
     listItem: {
@@ -110,7 +110,7 @@ class AccountSelection extends React.Component {
             });
 
         return (
-            <React.Fragment>
+            <>
                 <ListSubheader style={styles.subheaderTitle}>
                     {t("Account filter")}
 
@@ -133,7 +133,7 @@ class AccountSelection extends React.Component {
                     </Menu>
                 </ListSubheader>
                 <ListItem style={styles.listItem}>{selectedAccountChipItems}</ListItem>
-            </React.Fragment>
+            </>
         );
     }
 }
diff --git a/src/react/Components/FilterComponents/AmountFilter.jsx b/src/components/FilterComponents/AmountFilter.tsx
similarity index 95%
rename from src/react/Components/FilterComponents/AmountFilter.jsx
rename to src/components/FilterComponents/AmountFilter.tsx
index 8c1de7f4..f3507447 100644
--- a/src/react/Components/FilterComponents/AmountFilter.jsx
+++ b/src/components/FilterComponents/AmountFilter.tsx
@@ -6,7 +6,7 @@ import TextField from "@material-ui/core/TextField";
 import InputLabel from "@material-ui/core/InputLabel";
 import FormControl from "@material-ui/core/FormControl";
 
-import { setAmountFilterAmount, setAmountFilterType, clearAmountFilter } from "../../Actions/filters";
+import { setAmountFilterAmount, setAmountFilterType, clearAmountFilter } from "~actions/filters";
 
 class AmountFilter extends React.Component {
     constructor(props, context) {
@@ -24,7 +24,7 @@ class AmountFilter extends React.Component {
     render() {
         const t = this.props.t;
         return (
-            <React.Fragment>
+            <>
                 <TextField
                     label={t("Filter by amount")}
                     style={this.props.style}
@@ -40,7 +40,7 @@ class AmountFilter extends React.Component {
                         <MenuItem value="MORE">{`>`}</MenuItem>
                     </Select>
                 </FormControl>
-            </React.Fragment>
+            </>
         );
     }
 }
diff --git a/src/react/Components/FilterComponents/CardSelection.jsx b/src/components/FilterComponents/CardSelection.tsx
similarity index 94%
rename from src/react/Components/FilterComponents/CardSelection.jsx
rename to src/components/FilterComponents/CardSelection.tsx
index edd15551..a408029b 100644
--- a/src/react/Components/FilterComponents/CardSelection.jsx
+++ b/src/components/FilterComponents/CardSelection.tsx
@@ -14,12 +14,12 @@ import Tooltip from "@material-ui/core/Tooltip";
 import AddIcon from "@material-ui/icons/Add";
 import FilterListIcon from "@material-ui/icons/FilterList";
 
-import { cardsUpdate } from "../../Actions/cards";
-import { addCardIdFilter, removeCardIdFilter, toggleCardIdFilter } from "../../Actions/filters";
-import { getCardTypeImage } from "../../Pages/Cards/CardListItem";
-import { getCardDescription } from "../../Functions/Utils";
+import { addCardIdFilter, removeCardIdFilter, toggleCardIdFilter } from "~actions/filters";
+import { getCardTypeImage } from "~pages/Cards/CardListItem";
+import { getCardDescription } from "~functions/Utils";
+import { cardsUpdate } from "~store/cards/thunks";
 
-const styles = {
+const styles: any = {
     listItem: {
         display: "flex",
         flexWrap: "wrap",
@@ -46,7 +46,9 @@ const styles = {
     }
 };
 
-class CardSelection extends React.Component {
+class CardSelection extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -133,7 +135,7 @@ class CardSelection extends React.Component {
             });
 
         return (
-            <React.Fragment>
+            <>
                 <ListSubheader style={styles.subheaderTitle}>
                     {t("Card filter")}
 
@@ -156,7 +158,7 @@ class CardSelection extends React.Component {
                     </Menu>
                 </ListSubheader>
                 <ListItem style={styles.listItem}>{selectedCardChipItems}</ListItem>
-            </React.Fragment>
+            </>
         );
     }
 }
diff --git a/src/react/Components/FilterComponents/CategorySelection.jsx b/src/components/FilterComponents/CategorySelection.tsx
similarity index 98%
rename from src/react/Components/FilterComponents/CategorySelection.jsx
rename to src/components/FilterComponents/CategorySelection.tsx
index 2c76d2cd..00861661 100644
--- a/src/react/Components/FilterComponents/CategorySelection.jsx
+++ b/src/components/FilterComponents/CategorySelection.tsx
@@ -16,7 +16,7 @@ import CustomIcon from "../CustomIcon";
 import CategoryIcon from "../Categories/CategoryIcon";
 import CategoryChip from "../Categories/CategoryChip";
 
-import { addCategoryIdFilter, removeCategoryIdFilter, toggleCategoryIdFilter } from "../../Actions/filters";
+import { addCategoryIdFilter, removeCategoryIdFilter, toggleCategoryIdFilter } from "~actions/filters";
 
 const styles = {
     listItem: {
@@ -101,7 +101,7 @@ class CategorySelection extends React.Component {
         });
 
         return (
-            <React.Fragment>
+            <>
                 <ListSubheader style={styles.subheaderTitle}>
                     {t("Category filter")}
 
@@ -132,7 +132,7 @@ class CategorySelection extends React.Component {
                     </Menu>
                 </ListSubheader>
                 <ListItem style={styles.listItem}>{categoryItems}</ListItem>
-            </React.Fragment>
+            </>
         );
     }
 }
diff --git a/src/react/Components/FilterComponents/ClearFilter.jsx b/src/components/FilterComponents/ClearFilter.tsx
similarity index 95%
rename from src/react/Components/FilterComponents/ClearFilter.jsx
rename to src/components/FilterComponents/ClearFilter.tsx
index ea625a9e..2ba49d89 100644
--- a/src/react/Components/FilterComponents/ClearFilter.jsx
+++ b/src/components/FilterComponents/ClearFilter.tsx
@@ -4,9 +4,9 @@ import Button from "@material-ui/core/Button";
 import IconButton from "@material-ui/core/IconButton";
 import ClearIcon from "@material-ui/icons/Clear";
 
-import FilterDisabledChecker from "../../Functions/FilterDisabledChecker";
+import FilterDisabledChecker from "~functions/FilterDisabledChecker";
 
-import { resetFilters } from "../../Actions/filters";
+import { resetFilters } from "~actions/filters";
 
 class ClearFilter extends React.PureComponent {
     constructor(props, context) {
diff --git a/src/react/Components/FilterComponents/FilterDrawer.jsx b/src/components/FilterComponents/FilterDrawer.tsx
similarity index 99%
rename from src/react/Components/FilterComponents/FilterDrawer.jsx
rename to src/components/FilterComponents/FilterDrawer.tsx
index 5d3cdec0..d4e9deed 100644
--- a/src/react/Components/FilterComponents/FilterDrawer.jsx
+++ b/src/components/FilterComponents/FilterDrawer.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
-import DatePicker from "material-ui-pickers/DatePicker/index.js";
+import DatePicker from "material-ui-pickers/DatePicker";
 import { withTheme } from "@material-ui/core/styles";
 import IconButton from "@material-ui/core/IconButton";
 import Icon from "@material-ui/core/Icon";
@@ -41,7 +41,7 @@ import {
     clearFromDateFilter,
     clearToDateFilter,
     resetFilters
-} from "../../Actions/filters";
+} from "~actions/filters";
 
 import SearchFilter from "./SearchFilter";
 import AccountSelection from "./AccountSelection";
@@ -349,7 +349,7 @@ class FilterDrawer extends React.Component {
                 </ListSubheader>
 
                 {displayDateFilters && (
-                    <React.Fragment>
+                    <>
                         <ListItem style={styles.listItem}>
                             <DatePicker
                                 id="from-date"
@@ -396,7 +396,7 @@ class FilterDrawer extends React.Component {
                                 }}
                             />
                         </ListItem>
-                    </React.Fragment>
+                    </>
                 )}
 
                 <CategorySelection t={t} />
diff --git a/src/react/Components/FilterComponents/SearchFilter.jsx b/src/components/FilterComponents/SearchFilter.tsx
similarity index 95%
rename from src/react/Components/FilterComponents/SearchFilter.jsx
rename to src/components/FilterComponents/SearchFilter.tsx
index 5bf5af31..a4e3ecac 100644
--- a/src/react/Components/FilterComponents/SearchFilter.jsx
+++ b/src/components/FilterComponents/SearchFilter.tsx
@@ -6,7 +6,7 @@ import InputAdornment from "@material-ui/core/InputAdornment";
 
 import ClearIcon from "@material-ui/icons/Clear";
 
-import { setSearchFilter, clearSearchFilter } from "../../Actions/filters";
+import { setSearchFilter, clearSearchFilter } from "~actions/filters";
 
 class SearchFilter extends React.Component {
     constructor(props, context) {
diff --git a/src/react/Components/FilterCreationDialog.jsx b/src/components/FilterCreationDialog.tsx
similarity index 98%
rename from src/react/Components/FilterCreationDialog.jsx
rename to src/components/FilterCreationDialog.tsx
index 769e5c43..23050d01 100644
--- a/src/react/Components/FilterCreationDialog.jsx
+++ b/src/components/FilterCreationDialog.tsx
@@ -9,7 +9,7 @@ import ListItemText from "@material-ui/core/ListItemText";
 import TranslateButton from "./TranslationHelpers/Button";
 
 import NavLink from "./Routing/NavLink";
-import { formatIban } from "../Functions/Utils";
+import { formatIban } from "~functions/Utils";
 
 export default props => {
     const { t, item, open, onClose } = props;
diff --git a/src/react/Components/FormFields/AccountSelectorDialog.jsx b/src/components/FormFields/AccountSelectorDialog.tsx
similarity index 96%
rename from src/react/Components/FormFields/AccountSelectorDialog.jsx
rename to src/components/FormFields/AccountSelectorDialog.tsx
index 9506f081..8b96e13f 100644
--- a/src/react/Components/FormFields/AccountSelectorDialog.jsx
+++ b/src/components/FormFields/AccountSelectorDialog.tsx
@@ -13,9 +13,9 @@ import DialogTitle from "@material-ui/core/DialogTitle";
 
 import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
 
-import { formatMoney } from "../../Functions/Utils";
-import { filterShareInviteMonetaryAccountResponses } from "../../Functions/DataFilters";
-import { connectGetBudget } from "../../Functions/ConnectGetPermissions";
+import { formatMoney } from "~functions/Utils";
+import { filterShareInviteMonetaryAccountResponses } from "~functions/DataFilters";
+import { connectGetBudget } from "~functions/ConnectGetPermissions";
 
 const styles = {
     formControl: {
diff --git a/src/react/Components/FormFields/ColorPicker.jsx b/src/components/FormFields/ColorPicker.tsx
similarity index 100%
rename from src/react/Components/FormFields/ColorPicker.jsx
rename to src/components/FormFields/ColorPicker.tsx
diff --git a/src/react/Components/FormFields/EmailSuggestions.jsx b/src/components/FormFields/EmailSuggestions.tsx
similarity index 100%
rename from src/react/Components/FormFields/EmailSuggestions.jsx
rename to src/components/FormFields/EmailSuggestions.tsx
diff --git a/src/react/Components/FormFields/FilePicker.jsx b/src/components/FormFields/FilePicker.tsx
similarity index 100%
rename from src/react/Components/FormFields/FilePicker.jsx
rename to src/components/FormFields/FilePicker.tsx
diff --git a/src/react/Components/FormFields/GradientColorPicker.jsx b/src/components/FormFields/GradientColorPicker.tsx
similarity index 100%
rename from src/react/Components/FormFields/GradientColorPicker.jsx
rename to src/components/FormFields/GradientColorPicker.tsx
diff --git a/src/react/Components/FormFields/IconPicker.jsx b/src/components/FormFields/IconPicker.tsx
similarity index 90%
rename from src/react/Components/FormFields/IconPicker.jsx
rename to src/components/FormFields/IconPicker.tsx
index 57633c4f..d77a35be 100644
--- a/src/react/Components/FormFields/IconPicker.jsx
+++ b/src/components/FormFields/IconPicker.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { translate } from "react-i18next";
 import WindowedList from "react-windowed-list";
 import Button from "@material-ui/core/Button";
@@ -8,10 +7,10 @@ import TextField from "@material-ui/core/TextField";
 import Dialog from "@material-ui/core/Dialog";
 import DialogTitle from "@material-ui/core/DialogTitle";
 
-import Icons from "../../StaticData/Icons";
+import Icons from "~staticdata/Icons.json";
 import CustomIcon from "../CustomIcon";
 
-const styles = {
+const styles: any = {
     iconContainer: {
         height: 500,
         width: 600,
@@ -23,7 +22,16 @@ const styles = {
     }
 };
 
-class IconPicker extends React.Component {
+class IconPicker extends React.Component<any> {
+    static defaultProps = {
+        buttonLabel: "Pick an icon",
+        style: {},
+        buttonStyle: {},
+        buttonProps: {}
+    };
+
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -61,7 +69,7 @@ class IconPicker extends React.Component {
         }
     };
 
-    selectIcon = icon => event => {
+    selectIcon = icon => () => {
         this.props.onClick(icon);
         this.handleClose();
     };
@@ -110,15 +118,4 @@ class IconPicker extends React.Component {
     }
 }
 
-IconPicker.defaultProps = {
-    buttonLabel: "Pick an icon",
-    style: {},
-    buttonStyle: {},
-    buttonProps: {}
-};
-
-IconPicker.propTypes = {
-    onClick: PropTypes.func.isRequired
-};
-
 export default translate("translations")(IconPicker);
diff --git a/src/react/Components/FormFields/InputSuggestions.jsx b/src/components/FormFields/InputSuggestions.tsx
similarity index 100%
rename from src/react/Components/FormFields/InputSuggestions.jsx
rename to src/components/FormFields/InputSuggestions.tsx
diff --git a/src/react/Components/FormFields/MoneyFormatInput.jsx b/src/components/FormFields/MoneyFormatInput.tsx
similarity index 97%
rename from src/react/Components/FormFields/MoneyFormatInput.jsx
rename to src/components/FormFields/MoneyFormatInput.tsx
index 41768d2b..4b91929a 100644
--- a/src/react/Components/FormFields/MoneyFormatInput.jsx
+++ b/src/components/FormFields/MoneyFormatInput.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import NumberFormat from "react-number-format";
 import { withTheme } from "@material-ui/core/styles";
 
-import { preferedThousandSeparator, preferedDecimalSeparator } from "../../Functions/Utils";
+import { preferedThousandSeparator, preferedDecimalSeparator } from "~functions/Utils";
 
 const MoneyFormatInput = props => {
     const { style, ...otherProps } = props;
diff --git a/src/react/Components/FormFields/MoneyFormatInputDefault.jsx b/src/components/FormFields/MoneyFormatInputDefault.tsx
similarity index 97%
rename from src/react/Components/FormFields/MoneyFormatInputDefault.jsx
rename to src/components/FormFields/MoneyFormatInputDefault.tsx
index b059bfe8..0c3833a0 100644
--- a/src/react/Components/FormFields/MoneyFormatInputDefault.jsx
+++ b/src/components/FormFields/MoneyFormatInputDefault.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import NumberFormat from "react-number-format";
 import Input from "@material-ui/core/Input";
 import FormControl from "@material-ui/core/FormControl";
-import { preferedThousandSeparator, preferedDecimalSeparator } from "../../Functions/Utils";
+import { preferedThousandSeparator, preferedDecimalSeparator } from "~functions/Utils";
 
 import { withTheme } from "@material-ui/core/styles";
 
diff --git a/src/react/Components/FormFields/RedirectUrl.jsx b/src/components/FormFields/RedirectUrl.tsx
similarity index 100%
rename from src/react/Components/FormFields/RedirectUrl.jsx
rename to src/components/FormFields/RedirectUrl.tsx
diff --git a/src/react/Components/FormFields/SchedulePaymentForm.jsx b/src/components/FormFields/SchedulePaymentForm.tsx
similarity index 97%
rename from src/react/Components/FormFields/SchedulePaymentForm.jsx
rename to src/components/FormFields/SchedulePaymentForm.tsx
index 560ccbc1..4b05fbc3 100644
--- a/src/react/Components/FormFields/SchedulePaymentForm.jsx
+++ b/src/components/FormFields/SchedulePaymentForm.tsx
@@ -11,8 +11,8 @@ import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 
 import TranslateMenuItem from "../TranslationHelpers/MenuItem";
-import scheduleTexts from "../../Functions/ScheduleTexts";
-import { getUTCDate, UTCDateToLocalDate } from "../../Functions/Utils";
+import scheduleTexts from "~functions/ScheduleTexts";
+import { getUTCDate, UTCDateToLocalDate } from "~functions/Utils";
 
 const styles = {
     textField: {
diff --git a/src/react/Components/FormFields/TargetChip.jsx b/src/components/FormFields/TargetChip.tsx
similarity index 100%
rename from src/react/Components/FormFields/TargetChip.jsx
rename to src/components/FormFields/TargetChip.tsx
diff --git a/src/react/Components/FormFields/TargetChipList.jsx b/src/components/FormFields/TargetChipList.tsx
similarity index 100%
rename from src/react/Components/FormFields/TargetChipList.jsx
rename to src/components/FormFields/TargetChipList.tsx
diff --git a/src/react/Components/FormFields/TargetSelection.jsx b/src/components/FormFields/TargetSelection.tsx
similarity index 95%
rename from src/react/Components/FormFields/TargetSelection.jsx
rename to src/components/FormFields/TargetSelection.tsx
index e5a73728..a0d89d6f 100644
--- a/src/react/Components/FormFields/TargetSelection.jsx
+++ b/src/components/FormFields/TargetSelection.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { connect } from "react-redux";
-import PropTypes from "prop-types";
 import { translate } from "react-i18next";
 import Grid from "@material-ui/core/Grid";
 import Radio from "@material-ui/core/Radio";
@@ -15,9 +14,9 @@ import ContactsIcon from "@material-ui/icons/Contacts";
 import NavLink from "../Routing/NavLink";
 import InputSuggestions from "./InputSuggestions";
 import AccountSelectorDialog from "./AccountSelectorDialog";
-import { openSnackbar } from "../../Actions/snackbar";
-import { formatIban } from "../../Functions/Utils";
+import { formatIban } from "~functions/Utils";
 import TargetChipList from "./TargetChipList";
+import { actions as snackbarActions } from "~store/snackbar";
 
 const styles = {
     button: {
@@ -35,7 +34,13 @@ const styles = {
     }
 };
 
-class TargetSelection extends React.Component {
+class TargetSelection extends React.Component<any> {
+    static defaultProps = {
+        disabledTypes: []
+    };
+
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -297,20 +302,8 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        openSnackbar: message => dispatch(openSnackbar(message))
+        openSnackbar: message => dispatch(snackbarActions.open({ message }))
     };
 };
 
-TargetSelection.propTypes = {
-    disabledTypes: PropTypes.array,
-
-    addTarget: PropTypes.func.isRequired,
-    removeTarget: PropTypes.func.isRequired,
-    handleChange: PropTypes.func.isRequired,
-    handleChangeDirect: PropTypes.func.isRequired
-};
-TargetSelection.defaultProps = {
-    disabledTypes: []
-};
-
 export default connect(mapStateToProps, mapDispatchToProps)(translate("translations")(TargetSelection));
diff --git a/src/react/Components/GeoLocation/GeoLocationListItem.jsx b/src/components/GeoLocation/GeoLocationListItem.tsx
similarity index 94%
rename from src/react/Components/GeoLocation/GeoLocationListItem.jsx
rename to src/components/GeoLocation/GeoLocationListItem.tsx
index a6b55cc3..16c8e27a 100644
--- a/src/react/Components/GeoLocation/GeoLocationListItem.jsx
+++ b/src/components/GeoLocation/GeoLocationListItem.tsx
@@ -29,12 +29,12 @@ class GeoLocationListItem extends React.Component {
         if (!geoLocation) return null;
 
         return (
-            <React.Fragment>
+            <>
                 <ListItem button onClick={this.onClick}>
                     <ListItemText primary={t("Geolocation")} secondary={t("Click to view")} />
                 </ListItem>
                 <GeoLocationView t={t} onClose={this.onClose} visible={this.state.visible} geoLocation={geoLocation} />
-            </React.Fragment>
+            </>
         );
     }
 }
diff --git a/src/react/Components/GeoLocation/GeoLocationMap.jsx b/src/components/GeoLocation/GeoLocationMap.tsx
similarity index 100%
rename from src/react/Components/GeoLocation/GeoLocationMap.jsx
rename to src/components/GeoLocation/GeoLocationMap.tsx
diff --git a/src/react/Components/GeoLocation/GeoLocationView.jsx b/src/components/GeoLocation/GeoLocationView.tsx
similarity index 95%
rename from src/react/Components/GeoLocation/GeoLocationView.jsx
rename to src/components/GeoLocation/GeoLocationView.tsx
index 4ea1e11c..8b8fd757 100644
--- a/src/react/Components/GeoLocation/GeoLocationView.jsx
+++ b/src/components/GeoLocation/GeoLocationView.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Dialog from "@material-ui/core/Dialog";
 import Slide from "@material-ui/core/Slide";
 import GeoLocationMap from "./GeoLocationMap";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
+import TranslateButton from "~components/TranslationHelpers/Button";
 
 const Transition = props => <Slide direction={"up"} {...props} />;
 
diff --git a/src/react/Components/Header.jsx b/src/components/Header.tsx
similarity index 95%
rename from src/react/Components/Header.jsx
rename to src/components/Header.tsx
index f0dde76b..f92c396a 100644
--- a/src/react/Components/Header.jsx
+++ b/src/components/Header.tsx
@@ -12,8 +12,8 @@ import MinimizeIcon from "./CustomSVG/Minimize";
 import QueueHeaderIcon from "./Queue/QueueHeaderIcon";
 import TranslateTypography from "./TranslationHelpers/Typography";
 
-import IsDarwin from "../Functions/IsDarwin";
-import { toggleSidebar } from "../Actions/sidebar";
+import IsDarwin from "~functions/IsDarwin";
+import { toggleSidebar } from "~actions/sidebar";
 
 const remote = require("electron").remote;
 
@@ -25,7 +25,7 @@ const buttonDefaultStyles = {
     zIndex: 1000
 };
 
-const styles = {
+const styles: any = {
     headerMenuBtn: {
         ...buttonDefaultStyles,
         left: 5
@@ -71,7 +71,11 @@ const styles = {
     }
 };
 
-class Header extends React.Component {
+class Header extends React.Component<any> {
+    state: any;
+
+    mainWindow: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -128,7 +132,7 @@ class Header extends React.Component {
             middleIcon = <MaximizeIcon />;
         }
         const windowControls = displayButtons ? (
-            <React.Fragment>
+            <>
                 <IconButton aria-label="Minimize application" onClick={this.minimizeApp} style={styles.headerRightBtn3}>
                     <MinimizeIcon />
                 </IconButton>
@@ -142,7 +146,7 @@ class Header extends React.Component {
                 <IconButton aria-label="Exit application" onClick={this.closeApp} style={styles.headerRightBtn}>
                     <CloseIcon />
                 </IconButton>
-            </React.Fragment>
+            </>
         ) : null;
 
         const developmentEnvWarning =
@@ -164,13 +168,13 @@ class Header extends React.Component {
             <header style={styles.header}>
                 {/* hide all buttons if pdf mode enabled */}
                 {!pdfSaveModeEnabled && (
-                    <React.Fragment>
+                    <>
                         {wrappedButton}
                         {wrappedQueueIcon}
 
                         {developmentEnvWarning}
                         {windowControls}
-                    </React.Fragment>
+                    </>
                 )}
             </header>
         );
diff --git a/src/react/Components/ImportDialog.tsx b/src/components/ImportDialog.tsx
similarity index 100%
rename from src/react/Components/ImportDialog.tsx
rename to src/components/ImportDialog.tsx
diff --git a/src/react/Components/Layout.jsx b/src/components/Layout.tsx
similarity index 89%
rename from src/react/Components/Layout.jsx
rename to src/components/Layout.tsx
index 6e91c4fb..56596073 100644
--- a/src/react/Components/Layout.jsx
+++ b/src/components/Layout.tsx
@@ -7,11 +7,12 @@ import Grid from "@material-ui/core/Grid";
 import { withStyles } from "@material-ui/core/styles";
 import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
 import createMuiTheme from "@material-ui/core/styles/createMuiTheme";
+import { AppWindow } from "~app";
 
 // custom components
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import Logger from "../Functions/Logger";
-import VersionChecker from "../Functions/VersionChecker";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import VersionChecker from "~functions/VersionChecker";
+import { AppDispatch, ReduxState } from "~store/index";
 import NetworkStatusChecker from "./NetworkStatusChecker";
 import RuleCollectionChecker from "./RuleCollectionChecker";
 import QueueManager from "./Queue/QueueManager";
@@ -22,21 +23,25 @@ import Header from "./Header";
 import ErrorBoundary from "./ErrorBoundary";
 
 // themes
-import DefaultThemeConfig from "../Themes/DefaultTheme";
-import DarkThemeConfig from "../Themes/DarkTheme";
-const DefaultTheme = createMuiTheme(DefaultThemeConfig);
-const DarkTheme = createMuiTheme(DarkThemeConfig);
+import DefaultThemeConfig from "~themes/DefaultTheme";
+import DarkThemeConfig from "~themes/DarkTheme";
+const DefaultTheme = createMuiTheme(DefaultThemeConfig as any);
+const DarkTheme = createMuiTheme(DarkThemeConfig as any);
 const ThemeList = {
     DefaultTheme,
     DarkTheme
 };
 
 // redux actions
-import { openModal } from "../Actions/modal";
-import { openSnackbar } from "../Actions/snackbar";
-import { registrationClearUserInfo, registrationSetBunqDesktopClientData } from "../Actions/registration";
-import { setHideBalance, setTheme, setAutomaticThemeChange } from "../Actions/options";
-import { queueStartSync } from "../Actions/queue";
+import { openModal } from "~actions/modal";
+import { actions as snackbarActions } from "~store/snackbar";
+import { registrationClearUserInfo, registrationSetBunqDesktopClientData } from "~actions/registration";
+import { setHideBalance, setTheme, setAutomaticThemeChange } from "~actions/options";
+import { queueStartSync } from "~actions/queue";
+
+const openSnackbar = snackbarActions.open;
+
+declare let window: AppWindow;
 
 const styles = theme => ({
     contentContainer: {
@@ -60,7 +65,18 @@ const styles = theme => ({
     }
 });
 
-class Layout extends React.Component {
+interface IProps {
+}
+
+interface IState {
+}
+
+class Layout extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
+    minuteTimer: null | number;
+    activityTimer: null | number;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -132,7 +148,7 @@ class Layout extends React.Component {
 
         // setup minute timer
         this.checkTime();
-        this.minuteTimer = setInterval(this.checkTime, 5000);
+        this.minuteTimer = +setInterval(this.checkTime, 5000);
     }
 
     componentWillUpdate(nextProps) {
@@ -217,7 +233,7 @@ class Layout extends React.Component {
     };
 
     setActivityTimeout = () => {
-        this.activityTimer = setTimeout(() => {
+        this.activityTimer = +setTimeout(() => {
             // check if option is still enabled
             if (this.props.checkInactivity) {
                 // reload the app
@@ -301,7 +317,7 @@ class Layout extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         theme: state.options.theme,
         language: state.options.language,
@@ -325,17 +341,17 @@ const mapStateToProps = state => {
         userLoading: state.user.loading,
 
         paymentsLoading: state.payments.loading,
-        bunqMeTabsLoading: state.bunq_me_tabs.loading,
+        bunqMeTabsLoading: state.bunqMeTabs.loading,
         masterCardActionsLoading: state.master_card_actions.loading,
         requestInquiriesLoading: state.request_inquiries.loading,
         requestResponsesLoading: state.request_responses.loading
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
+const mapDispatchToProps = (dispatch: AppDispatch, ownProps: IProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        openSnackbar: (message, duration = 4000) => dispatch(openSnackbar(message, duration)),
+        openSnackbar: (message, duration = 4000) => dispatch(openSnackbar({ message, duration })),
         openModal: (message, title) => dispatch(openModal(message, title)),
         BunqErrorHandler: (error, customError = false) => BunqErrorHandler(dispatch, error, customError),
 
@@ -353,6 +369,6 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     };
 };
 
-export default withStyles(styles, { withTheme: true })(
+export default withStyles(styles as any, { withTheme: true })(
     withRouter(connect(mapStateToProps, mapDispatchToProps)(translate("translations")(Layout)))
 );
diff --git a/src/react/Components/LimitedPremiumListItem.jsx b/src/components/LimitedPremiumListItem.tsx
similarity index 97%
rename from src/react/Components/LimitedPremiumListItem.jsx
rename to src/components/LimitedPremiumListItem.tsx
index a476641d..0958a30f 100644
--- a/src/react/Components/LimitedPremiumListItem.jsx
+++ b/src/components/LimitedPremiumListItem.tsx
@@ -6,7 +6,7 @@ import ListItemText from "@material-ui/core/ListItemText";
 import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 
 import LinearProgress from "./LinearProgress";
-import { formatMoney } from "../Functions/Utils";
+import { formatMoney } from "~functions/Utils";
 
 const styles = {
     iconButton: {
diff --git a/src/react/Components/LinearProgress.jsx b/src/components/LinearProgress.tsx
similarity index 90%
rename from src/react/Components/LinearProgress.jsx
rename to src/components/LinearProgress.tsx
index 43d2c3e9..03e10561 100644
--- a/src/react/Components/LinearProgress.jsx
+++ b/src/components/LinearProgress.tsx
@@ -20,7 +20,7 @@ const defaultStyle = {
 };
 
 const LinearProgress = props => {
-    const { theme, color = false, height = 8, backgroundColor = false, style = {}, valueStyle = {}, value } = props;
+    const { theme, color = "primary", height = 8, backgroundColor = false, style = {}, valueStyle = {}, value } = props;
 
     let backgroundProgressBarColor = theme.palette.primary.main;
     if (color && theme.palette[color] && theme.palette[color].main) {
@@ -56,8 +56,4 @@ const LinearProgress = props => {
     );
 };
 
-LinearProgress.defaultProps = {
-    color: "primary"
-};
-
 export default withTheme()(LinearProgress);
diff --git a/src/react/Components/ListItemWrapper.jsx b/src/components/ListItemWrapper.tsx
similarity index 100%
rename from src/react/Components/ListItemWrapper.jsx
rename to src/components/ListItemWrapper.tsx
diff --git a/src/react/Components/ListItems/BunqMeTabListItem.jsx b/src/components/ListItems/BunqMeTabListItem.tsx
similarity index 99%
rename from src/react/Components/ListItems/BunqMeTabListItem.jsx
rename to src/components/ListItems/BunqMeTabListItem.tsx
index 9d1ce9f0..8fc6a9f0 100644
--- a/src/react/Components/ListItems/BunqMeTabListItem.jsx
+++ b/src/components/ListItems/BunqMeTabListItem.tsx
@@ -22,7 +22,7 @@ import AccountQRFullscreen from "../QR/AccountQRFullscreen";
 import TranslateButton from "../TranslationHelpers/Button";
 import CopyToClipboardWrap from "../CopyToClipboardWrap";
 
-import { humanReadableDate, formatMoney } from "../../Functions/Utils";
+import { humanReadableDate, formatMoney } from "~functions/Utils";
 
 const styles = {
     actionListItem: {
diff --git a/src/react/Components/ListItems/MasterCardActionListItem.jsx b/src/components/ListItems/MasterCardActionListItem.tsx
similarity index 92%
rename from src/react/Components/ListItems/MasterCardActionListItem.jsx
rename to src/components/ListItems/MasterCardActionListItem.tsx
index 9fded25d..cc61046c 100644
--- a/src/react/Components/ListItems/MasterCardActionListItem.jsx
+++ b/src/components/ListItems/MasterCardActionListItem.tsx
@@ -7,14 +7,14 @@ import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import Avatar from "@material-ui/core/Avatar";
 import Divider from "@material-ui/core/Divider";
 
-import NavLink from "../../Components/Routing/NavLink";
+import NavLink from "~components/Routing/NavLink";
 import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
 import CategoryIcons from "../Categories/CategoryIcons";
 import MoneyAmountLabel from "../MoneyAmountLabel";
 
-import { masterCardActionParser } from "../../Functions/EventStatusTexts";
-import { formatMoney } from "../../Functions/Utils";
-import { defaultMastercardImage } from "../../Functions/DefaultImageHandlers";
+import { masterCardActionParser } from "~functions/EventStatusTexts";
+import { formatMoney } from "~functions/Utils";
+import { defaultMastercardImage } from "~functions/DefaultImageHandlers";
 
 const styles = {
     listItemText: {
diff --git a/src/react/Components/ListItems/PaymentListItem.jsx b/src/components/ListItems/PaymentListItem.tsx
similarity index 96%
rename from src/react/Components/ListItems/PaymentListItem.jsx
rename to src/components/ListItems/PaymentListItem.tsx
index 899981bf..3d0df3c8 100644
--- a/src/react/Components/ListItems/PaymentListItem.jsx
+++ b/src/components/ListItems/PaymentListItem.tsx
@@ -6,9 +6,9 @@ import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import Avatar from "@material-ui/core/Avatar";
 import Divider from "@material-ui/core/Divider";
 
-import { formatMoney } from "../../Functions/Utils";
-import { paymentText } from "../../Functions/EventStatusTexts";
-import { defaultPaymentImage } from "../../Functions/DefaultImageHandlers";
+import { formatMoney } from "~functions/Utils";
+import { paymentText } from "~functions/EventStatusTexts";
+import { defaultPaymentImage } from "~functions/DefaultImageHandlers";
 
 import NavLink from "../Routing/NavLink";
 import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
diff --git a/src/react/Components/ListItems/RequestInquiryBatchListItem.jsx b/src/components/ListItems/RequestInquiryBatchListItem.tsx
similarity index 99%
rename from src/react/Components/ListItems/RequestInquiryBatchListItem.jsx
rename to src/components/ListItems/RequestInquiryBatchListItem.tsx
index 2fdf7f6d..000b7624 100644
--- a/src/react/Components/ListItems/RequestInquiryBatchListItem.jsx
+++ b/src/components/ListItems/RequestInquiryBatchListItem.tsx
@@ -19,7 +19,7 @@ import Share from "@material-ui/icons/Share";
 import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
 import RequestInquiryListItem from "./RequestInquiryListItem";
 
-import { formatMoney, humanReadableDate } from "../../Functions/Utils";
+import { formatMoney, humanReadableDate } from "~functions/Utils";
 
 const styles = {
     listItemText: {
diff --git a/src/react/Components/ListItems/RequestInquiryListItem.jsx b/src/components/ListItems/RequestInquiryListItem.tsx
similarity index 94%
rename from src/react/Components/ListItems/RequestInquiryListItem.jsx
rename to src/components/ListItems/RequestInquiryListItem.tsx
index 9425f94b..8f0960da 100644
--- a/src/react/Components/ListItems/RequestInquiryListItem.jsx
+++ b/src/components/ListItems/RequestInquiryListItem.tsx
@@ -6,9 +6,9 @@ import { translate } from "react-i18next";
 import Avatar from "@material-ui/core/Avatar";
 import Divider from "@material-ui/core/Divider";
 
-import { formatMoney } from "../../Functions/Utils";
-import { requestInquiryText } from "../../Functions/EventStatusTexts";
-import NavLink from "../../Components/Routing/NavLink";
+import { formatMoney } from "~functions/Utils";
+import { requestInquiryText } from "~functions/EventStatusTexts";
+import NavLink from "~components/Routing/NavLink";
 import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
 import CategoryIcons from "../Categories/CategoryIcons";
 import MoneyAmountLabel from "../MoneyAmountLabel";
diff --git a/src/react/Components/ListItems/RequestResponseListItem.jsx b/src/components/ListItems/RequestResponseListItem.tsx
similarity index 92%
rename from src/react/Components/ListItems/RequestResponseListItem.jsx
rename to src/components/ListItems/RequestResponseListItem.tsx
index 46b04d0d..7255fead 100644
--- a/src/react/Components/ListItems/RequestResponseListItem.jsx
+++ b/src/components/ListItems/RequestResponseListItem.tsx
@@ -6,11 +6,11 @@ import { translate } from "react-i18next";
 import Avatar from "@material-ui/core/Avatar";
 import Divider from "@material-ui/core/Divider";
 
-import { formatMoney } from "../../Functions/Utils";
-import { requestResponseText } from "../../Functions/EventStatusTexts";
-import { defaultRequestResponseImage } from "../../Functions/DefaultImageHandlers";
+import { formatMoney } from "~functions/Utils";
+import { requestResponseText } from "~functions/EventStatusTexts";
+import { defaultRequestResponseImage } from "~functions/DefaultImageHandlers";
 
-import NavLink from "../../Components/Routing/NavLink";
+import NavLink from "~components/Routing/NavLink";
 import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
 import CategoryIcons from "../Categories/CategoryIcons";
 import MoneyAmountLabel from "../MoneyAmountLabel";
diff --git a/src/react/Components/ListItems/ShareInviteBankTypes/DraftAccess.jsx b/src/components/ListItems/ShareInviteBankTypes/DraftAccess.tsx
similarity index 100%
rename from src/react/Components/ListItems/ShareInviteBankTypes/DraftAccess.jsx
rename to src/components/ListItems/ShareInviteBankTypes/DraftAccess.tsx
diff --git a/src/react/Components/ListItems/ShareInviteBankTypes/FullAccess.jsx b/src/components/ListItems/ShareInviteBankTypes/FullAccess.tsx
similarity index 100%
rename from src/react/Components/ListItems/ShareInviteBankTypes/FullAccess.jsx
rename to src/components/ListItems/ShareInviteBankTypes/FullAccess.tsx
diff --git a/src/react/Components/ListItems/ShareInviteBankTypes/ShowOnly.jsx b/src/components/ListItems/ShareInviteBankTypes/ShowOnly.tsx
similarity index 100%
rename from src/react/Components/ListItems/ShareInviteBankTypes/ShowOnly.jsx
rename to src/components/ListItems/ShareInviteBankTypes/ShowOnly.tsx
diff --git a/src/react/Components/ListItems/ShareInviteMonetaryAccountInquiryListItem.jsx b/src/components/ListItems/ShareInviteMonetaryAccountInquiryListItem.tsx
similarity index 96%
rename from src/react/Components/ListItems/ShareInviteMonetaryAccountInquiryListItem.jsx
rename to src/components/ListItems/ShareInviteMonetaryAccountInquiryListItem.tsx
index 2f3171f7..a11f7eb6 100644
--- a/src/react/Components/ListItems/ShareInviteMonetaryAccountInquiryListItem.jsx
+++ b/src/components/ListItems/ShareInviteMonetaryAccountInquiryListItem.tsx
@@ -14,7 +14,7 @@ import TranslateButton from "../TranslationHelpers/Button";
 import ShowOnly from "./ShareInviteBankTypes/ShowOnly";
 import FullAccess from "./ShareInviteBankTypes/FullAccess";
 import DraftAccess from "./ShareInviteBankTypes/DraftAccess";
-import { shareInviteMonetaryAccountInquiriesInfoUpdate } from "../../Actions/share_invite_monetary_account_inquiries";
+import { shareInviteMonetaryAccountInquiriesInfoUpdate } from "~actions/share_invite_monetary_account_inquiries";
 
 const styles = {
     listItemText: {
@@ -87,7 +87,7 @@ class ShareInviteMonetaryAccountInquiryListItem extends React.Component {
         const displayName = aliasInfo.display_name;
 
         const connectActions = (
-            <React.Fragment>
+            <>
                 <TranslateButton
                     style={styles.buttons}
                     variant="contained"
@@ -97,7 +97,7 @@ class ShareInviteMonetaryAccountInquiryListItem extends React.Component {
                 >
                     Cancel
                 </TranslateButton>
-            </React.Fragment>
+            </>
         );
 
         const shareDetailTypes = Object.keys(shareInviteMonetaryAccountInquiry.share_detail);
diff --git a/src/react/Components/ListItems/ShareInviteMonetaryAccountResponseListItem.jsx b/src/components/ListItems/ShareInviteMonetaryAccountResponseListItem.tsx
similarity index 97%
rename from src/react/Components/ListItems/ShareInviteMonetaryAccountResponseListItem.jsx
rename to src/components/ListItems/ShareInviteMonetaryAccountResponseListItem.tsx
index 5f8d9776..8b0c1b36 100644
--- a/src/react/Components/ListItems/ShareInviteMonetaryAccountResponseListItem.jsx
+++ b/src/components/ListItems/ShareInviteMonetaryAccountResponseListItem.tsx
@@ -14,7 +14,7 @@ import TranslateButton from "../TranslationHelpers/Button";
 import ShowOnly from "./ShareInviteBankTypes/ShowOnly";
 import FullAccess from "./ShareInviteBankTypes/FullAccess";
 import DraftAccess from "./ShareInviteBankTypes/DraftAccess";
-import { shareInviteMonetaryAccountResponsesInfoUpdate } from "../../Actions/share_invite_monetary_account_responses";
+import { shareInviteMonetaryAccountResponsesInfoUpdate } from "~actions/share_invite_monetary_account_responses";
 
 const styles = {
     listItemText: {
@@ -102,7 +102,7 @@ class ShareInviteMonetaryAccountResponseListItem extends React.Component {
         const displayName = aliasInfo.display_name;
 
         const connectActions = (
-            <React.Fragment>
+            <>
                 <TranslateButton
                     style={styles.buttons}
                     variant="contained"
@@ -121,7 +121,7 @@ class ShareInviteMonetaryAccountResponseListItem extends React.Component {
                 >
                     Reject
                 </TranslateButton>
-            </React.Fragment>
+            </>
         );
 
         const shareDetailTypes = Object.keys(shareInviteMonetaryAccountResponse.share_detail);
diff --git a/src/react/Components/MainDialog.jsx b/src/components/MainDialog.tsx
similarity index 97%
rename from src/react/Components/MainDialog.jsx
rename to src/components/MainDialog.tsx
index 7ae945f1..c8efa25a 100644
--- a/src/react/Components/MainDialog.jsx
+++ b/src/components/MainDialog.tsx
@@ -12,7 +12,7 @@ import TranslateButton from "./TranslationHelpers/Button";
 const Transition = props => <Slide direction="left" {...props} />;
 
 // redux actions
-import { closeModal } from "../Actions/modal";
+import { closeModal } from "~actions/modal";
 
 class MainDialog extends React.Component {
     constructor(props, context) {
diff --git a/src/react/Components/MainSnackbar.jsx b/src/components/MainSnackbar.tsx
similarity index 86%
rename from src/react/Components/MainSnackbar.jsx
rename to src/components/MainSnackbar.tsx
index ddd7202b..bcf03dee 100644
--- a/src/react/Components/MainSnackbar.jsx
+++ b/src/components/MainSnackbar.tsx
@@ -2,18 +2,21 @@ import React from "react";
 import { connect } from "react-redux";
 import Snackbar from "@material-ui/core/Snackbar";
 import Slide from "@material-ui/core/Slide";
+
 const Transition = props => <Slide direction={"down"} {...props} />;
 
 // redux actions
-import { closeSnackbar } from "../Actions/snackbar.js";
+import { actions as snackbarActions } from "~store/snackbar";
 
-const styles = {
+const styles: any = {
     snackbar: {
         marginTop: 50
     }
 };
 
-class MainSnackbar extends React.PureComponent {
+class MainSnackbar extends React.PureComponent<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -50,7 +53,7 @@ const mapStateToProps = store => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        closeSnackbar: () => dispatch(closeSnackbar())
+        closeSnackbar: () => dispatch(snackbarActions.close())
     };
 };
 
diff --git a/src/react/Components/MoneyAmountLabel.jsx b/src/components/MoneyAmountLabel.tsx
similarity index 100%
rename from src/react/Components/MoneyAmountLabel.jsx
rename to src/components/MoneyAmountLabel.tsx
diff --git a/src/react/Components/NetworkStatusChecker.jsx b/src/components/NetworkStatusChecker.tsx
similarity index 89%
rename from src/react/Components/NetworkStatusChecker.jsx
rename to src/components/NetworkStatusChecker.tsx
index c080e1ea..7c75822e 100644
--- a/src/react/Components/NetworkStatusChecker.jsx
+++ b/src/components/NetworkStatusChecker.tsx
@@ -8,17 +8,19 @@ import Slide from "@material-ui/core/Slide";
 
 import RefreshIcon from "@material-ui/icons/Refresh";
 
-import { applicationSetOffline, applicationSetOnline } from "../Actions/application";
+import { actions as applicationActions } from "~store/application";
 
 const Transition = props => <Slide direction={"down"} {...props} />;
 
-const styles = {
+const styles: any = {
     snackbar: {
         marginTop: 50
     }
 };
 
-class NetworkStatusChecker extends React.PureComponent {
+class NetworkStatusChecker extends React.PureComponent<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -96,8 +98,8 @@ const mapStateToProps = store => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        applicationSetOnline: () => dispatch(applicationSetOnline()),
-        applicationSetOffline: () => dispatch(applicationSetOffline())
+        applicationSetOnline: () => dispatch(applicationActions.setOnline()),
+        applicationSetOffline: () => dispatch(applicationActions.setOffline())
     };
 };
 
diff --git a/src/react/Components/NoteTexts/NoteTextForm.jsx b/src/components/NoteTexts/NoteTextForm.tsx
similarity index 98%
rename from src/react/Components/NoteTexts/NoteTextForm.jsx
rename to src/components/NoteTexts/NoteTextForm.tsx
index cfd7c0f3..7db01d4e 100644
--- a/src/react/Components/NoteTexts/NoteTextForm.jsx
+++ b/src/components/NoteTexts/NoteTextForm.tsx
@@ -15,8 +15,8 @@ import {
     notesTextsAddNote,
     // notesTextsUpdateNote,
     notesTextsDeleteNote
-} from "../../Actions/note_texts";
-import NoteTextTypeParser from "../../Functions/NoteTextTypeParser";
+} from "~actions/note_texts";
+import NoteTextTypeParser from "~functions/NoteTextTypeParser";
 
 const styles = {
     paper: {
diff --git a/src/react/Components/NoteTexts/NoteTextItem.jsx b/src/components/NoteTexts/NoteTextItem.tsx
similarity index 95%
rename from src/react/Components/NoteTexts/NoteTextItem.jsx
rename to src/components/NoteTexts/NoteTextItem.tsx
index 501d94ca..5267e55c 100644
--- a/src/react/Components/NoteTexts/NoteTextItem.jsx
+++ b/src/components/NoteTexts/NoteTextItem.tsx
@@ -6,8 +6,8 @@ import IconButton from "@material-ui/core/IconButton";
 
 import DeleteIcon from "@material-ui/icons/Delete";
 // import EditIcon from "@material-ui/icons/Edit";
-import { humanReadableDate } from "../../Functions/Utils";
-import NoteTextTypeParser from "../../Functions/NoteTextTypeParser";
+import { humanReadableDate } from "~functions/Utils";
+import NoteTextTypeParser from "~functions/NoteTextTypeParser";
 
 const styles = {};
 
diff --git a/src/react/Components/PDFExportHelper/Base64BunqLogo.js b/src/components/PDFExportHelper/Base64BunqLogo.ts
similarity index 100%
rename from src/react/Components/PDFExportHelper/Base64BunqLogo.js
rename to src/components/PDFExportHelper/Base64BunqLogo.ts
diff --git a/src/react/Components/PDFExportHelper/PDFExportHelper.jsx b/src/components/PDFExportHelper/PDFExportHelper.tsx
similarity index 87%
rename from src/react/Components/PDFExportHelper/PDFExportHelper.jsx
rename to src/components/PDFExportHelper/PDFExportHelper.tsx
index 95373a3e..e7345bc4 100644
--- a/src/react/Components/PDFExportHelper/PDFExportHelper.jsx
+++ b/src/components/PDFExportHelper/PDFExportHelper.tsx
@@ -7,11 +7,11 @@ import ListItemText from "@material-ui/core/ListItemText";
 import Divider from "@material-ui/core/Divider";
 
 import bunqTransparantLogo from "./Base64BunqLogo";
-import { formatIban } from "../../Functions/Utils";
+import { formatIban } from "~functions/Utils";
 
-import { applicationSetPDFMode } from "../../Actions/application";
-import { openSnackbar } from "../../Actions/snackbar";
-import { setTheme } from "../../Actions/options";
+import { actions as applicationActions } from "~store/application";
+import { actions as snackbarActions } from "~store/snackbar";
+import { setTheme } from "~actions/options";
 
 const styles = {
     bunqLogo: {
@@ -23,7 +23,9 @@ const styles = {
     }
 };
 
-class PDFExportHelper extends React.PureComponent {
+class PDFExportHelper extends React.PureComponent<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -87,7 +89,7 @@ class PDFExportHelper extends React.PureComponent {
 
                 <List style={styles.list}>
                     {personalAlias && (
-                        <React.Fragment>
+                        <>
                             <ListItem>
                                 <ListItemText primary={t("Account holder")} secondary={personalAlias.display_name} />
                             </ListItem>
@@ -100,7 +102,7 @@ class PDFExportHelper extends React.PureComponent {
                                 />
                             </ListItem>
                             <Divider style={styles.divider} />
-                        </React.Fragment>
+                        </>
                     )}
 
                     <ListItem>
@@ -122,13 +124,13 @@ class PDFExportHelper extends React.PureComponent {
                     <Divider style={styles.divider} />
 
                     {paymentDateUpdated && paymentDate !== paymentDateUpdated && (
-                        <React.Fragment>
+                        <>
                             <ListItem>
                                 <ListItemText primary={t("Date updated")} secondary={paymentDateUpdated} />
                             </ListItem>
 
                             <Divider style={styles.divider} />
-                        </React.Fragment>
+                        </>
                     )}
 
                     <ListItem>
@@ -136,7 +138,7 @@ class PDFExportHelper extends React.PureComponent {
                     </ListItem>
 
                     {counterPartyIban && (
-                        <React.Fragment>
+                        <>
                             <Divider style={styles.divider} />
 
                             <ListItem>
@@ -145,31 +147,31 @@ class PDFExportHelper extends React.PureComponent {
                                     secondary={formatIban(counterPartyIban)}
                                 />
                             </ListItem>
-                        </React.Fragment>
+                        </>
                     )}
 
                     {payment.merchant_reference && (
-                        <React.Fragment>
+                        <>
                             <Divider style={styles.divider} />
 
                             <ListItem>
                                 <ListItemText primary={merchantReferenceText} secondary={payment.merchant_reference} />
                             </ListItem>
-                        </React.Fragment>
+                        </>
                     )}
 
                     {payment.mandate_identifier && (
-                        <React.Fragment>
+                        <>
                             <Divider style={styles.divider} />
 
                             <ListItem>
                                 <ListItemText primary={mandateIdentifierText} secondary={payment.mandate_identifier} />
                             </ListItem>
-                        </React.Fragment>
+                        </>
                     )}
 
                     {payment.credit_scheme_identifier && (
-                        <React.Fragment>
+                        <>
                             <Divider style={styles.divider} />
 
                             <ListItem>
@@ -178,7 +180,7 @@ class PDFExportHelper extends React.PureComponent {
                                     secondary={payment.credit_scheme_identifier}
                                 />
                             </ListItem>
-                        </React.Fragment>
+                        </>
                     )}
                 </List>
             </div>
@@ -197,9 +199,9 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        openSnackbar: message => dispatch(openSnackbar(message)),
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
 
-        applicationSetPDFMode: enabled => dispatch(applicationSetPDFMode(enabled)),
+        applicationSetPDFMode: enabled => dispatch(applicationActions.setPdfMode(enabled)),
 
         setTheme: theme => dispatch(setTheme(theme))
     };
diff --git a/src/react/Components/QR/AccountQRCode.jsx b/src/components/QR/AccountQRCode.tsx
similarity index 100%
rename from src/react/Components/QR/AccountQRCode.jsx
rename to src/components/QR/AccountQRCode.tsx
diff --git a/src/react/Components/QR/AccountQRFullscreen.jsx b/src/components/QR/AccountQRFullscreen.tsx
similarity index 93%
rename from src/react/Components/QR/AccountQRFullscreen.jsx
rename to src/components/QR/AccountQRFullscreen.tsx
index 22ece6ac..e5bce148 100644
--- a/src/react/Components/QR/AccountQRFullscreen.jsx
+++ b/src/components/QR/AccountQRFullscreen.tsx
@@ -15,7 +15,7 @@ import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
 import QRSvg from "./QRSvg";
 import QRCode from "./QRCode";
 
-import { formatIban } from "../../Functions/Utils";
+import { formatIban } from "~functions/Utils";
 
 const styles = theme => ({
     btnIcon: {
@@ -83,7 +83,7 @@ class AccountQRFullscreen extends React.PureComponent {
                 });
 
                 dialogContent = (
-                    <React.Fragment>
+                    <>
                         <AccountQRCode accountId={this.props.accountId} size={250} />
                         <ListItem className={classes.listItem}>
                             <Avatar className={classes.bigAvatar}>
@@ -95,30 +95,30 @@ class AccountQRFullscreen extends React.PureComponent {
                             </Avatar>
                             <ListItemText primary={accountInfo.description} secondary={formatIban(IBAN)} />
                         </ListItem>
-                    </React.Fragment>
+                    </>
                 );
                 break;
             case "TEXT":
                 dialogContent = (
-                    <React.Fragment>
+                    <>
                         <QRCode value={this.props.text} size={250} />
                         <ListItem className={classes.listItem} dense>
                             <ListItemText primary={this.props.text} />
                         </ListItem>
-                    </React.Fragment>
+                    </>
                 );
                 break;
             case "HIDDEN":
                 dialogContent = (
-                    <React.Fragment>
+                    <>
                         <QRCode value={this.props.text} size={250} />
-                    </React.Fragment>
+                    </>
                 );
                 break;
         }
 
         return (
-            <React.Fragment>
+            <>
                 <IconButton onClick={this.handleClickOpen}>
                     <QRSvg />
                 </IconButton>
@@ -134,7 +134,7 @@ class AccountQRFullscreen extends React.PureComponent {
                         <div className={classes.dialogContentWrapper}>{dialogContent}</div>
                     </div>
                 </Dialog>
-            </React.Fragment>
+            </>
         );
     }
 }
diff --git a/src/react/Components/QR/QRCode.jsx b/src/components/QR/QRCode.tsx
similarity index 100%
rename from src/react/Components/QR/QRCode.jsx
rename to src/components/QR/QRCode.tsx
diff --git a/src/react/Components/QR/QRSvg.jsx b/src/components/QR/QRSvg.tsx
similarity index 100%
rename from src/react/Components/QR/QRSvg.jsx
rename to src/components/QR/QRSvg.tsx
diff --git a/src/react/Components/Queue/QueueHeaderIcon.jsx b/src/components/Queue/QueueHeaderIcon.tsx
similarity index 91%
rename from src/react/Components/Queue/QueueHeaderIcon.jsx
rename to src/components/Queue/QueueHeaderIcon.tsx
index 20f715e5..ee7ca8ea 100644
--- a/src/react/Components/Queue/QueueHeaderIcon.jsx
+++ b/src/components/Queue/QueueHeaderIcon.tsx
@@ -6,11 +6,14 @@ import IconButton from "@material-ui/core/IconButton";
 
 import SyncIcon from "@material-ui/icons/Sync";
 
-import { queueStartSync } from "../../Actions/queue";
+import { queueStartSync } from "~actions/queue";
 
 const styles = {};
 
-class QueueHeaderIcon extends React.Component {
+class QueueHeaderIcon extends React.Component<any> {
+    state: any;
+    updateDelay: null | number;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -24,7 +27,7 @@ class QueueHeaderIcon extends React.Component {
         // throttle updates by 250ms to gather up rapid redux events
         if (nextProps.queueRequestCounter !== this.state.queueRequestCounter) {
             if (this.updateDelay) clearTimeout(this.updateDelay);
-            this.updateDelay = setTimeout(this.setQueueRequestCounter, 250);
+            this.updateDelay = +setTimeout(this.setQueueRequestCounter, 250);
         }
 
         if (nextProps.user !== this.props.user) return true;
diff --git a/src/react/Components/Queue/QueueManager.jsx b/src/components/Queue/QueueManager.tsx
similarity index 93%
rename from src/react/Components/Queue/QueueManager.jsx
rename to src/components/Queue/QueueManager.tsx
index 63b81929..a574bd9b 100644
--- a/src/react/Components/Queue/QueueManager.jsx
+++ b/src/components/Queue/QueueManager.tsx
@@ -2,16 +2,16 @@ import React from "react";
 import { ipcRenderer } from "electron";
 import { translate } from "react-i18next";
 import { connect } from "react-redux";
-import Payment from "../../Models/Payment";
-import BunqMeTab from "../../Models/BunqMeTab";
-import RequestResponse from "../../Models/RequestResponse";
-import RequestInquiry from "../../Models/RequestInquiry";
-import RequestInquiryBatch from "../../Models/RequestInquiryBatch";
-import MasterCardAction from "../../Models/MasterCardAction";
 
-import NotificationHelper from "../../Functions/NotificationHelper";
-import { connectGetPermissions } from "../../Functions/ConnectGetPermissions";
-import { paymentApiFilter } from "../../Functions/DataFilters";
+import Payment from "~models/Payment";
+import BunqMeTab from "~models/BunqMeTab";
+import RequestResponse from "~models/RequestResponse";
+import RequestInquiry from "~models/RequestInquiry";
+import RequestInquiryBatch from "~models/RequestInquiryBatch";
+import MasterCardAction from "~models/MasterCardAction";
+import NotificationHelper from "~functions/NotificationHelper";
+import { connectGetPermissions } from "~functions/ConnectGetPermissions";
+import { paymentApiFilter } from "~functions/DataFilters";
 
 import {
     queueDecreaseRequestCounter,
@@ -20,21 +20,34 @@ import {
     queueFinishedSync,
     queueResetSyncState,
     queueStartSync
-} from "../../Actions/queue";
-import { paymentsSetInfo } from "../../Actions/payments";
-import { bunqMeTabsSetInfo } from "../../Actions/bunq_me_tabs";
-import { masterCardActionsSetInfo } from "../../Actions/master_card_actions";
-import { requestInquiriesSetInfo } from "../../Actions/request_inquiries";
-import { requestInquiryBatchesSetInfo } from "../../Actions/request_inquiry_batches";
-import { requestResponsesSetInfo } from "../../Actions/request_responses";
-import { shareInviteBankInquiriesSetInfo } from "../../Actions/share_invite_monetary_account_inquiries";
-import { shareInviteMonetaryAccountResponsesSetInfo } from "../../Actions/share_invite_monetary_account_responses";
-import { openSnackbar } from "../../Actions/snackbar";
+} from "~actions/queue";
+import { paymentsSetInfo } from "~actions/payments";
+import { masterCardActionsSetInfo } from "~actions/master_card_actions";
+import { requestInquiriesSetInfo } from "~actions/request_inquiries";
+import { requestInquiryBatchesSetInfo } from "~actions/request_inquiry_batches";
+import { requestResponsesSetInfo } from "~actions/request_responses";
+import { shareInviteBankInquiriesSetInfo } from "~actions/share_invite_monetary_account_inquiries";
+import { shareInviteMonetaryAccountResponsesSetInfo } from "~actions/share_invite_monetary_account_responses";
+import { actions as bunqMeTabsActions } from "~store/bunqMeTabs";
+import { AppDispatch, ReduxState } from "~store/index";
+import { actions as snackbarActions } from "~store/snackbar";
 
 export const DEFAULT_EVENT_COUNT_LIMIT = 50;
 export const EVENT_TOTAL_LIMIT = 1000;
 
-class QueueManager extends React.Component {
+interface IProps {
+}
+
+interface IState {
+}
+
+class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+    delayedQueue: null | number;
+    delayedSetState: null | number;
+    automaticUpdateTimer: null | number;
+    automaticUpdateTimerDuration: null | number;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -90,14 +103,14 @@ class QueueManager extends React.Component {
                 // clear existing timeout if it exists
                 if (this.delayedQueue) clearTimeout(this.delayedQueue);
                 // delay the queue update
-                this.delayedQueue = setTimeout(() => this.triggerQueueUpdate(eventCount), 100);
+                this.delayedQueue = +setTimeout(() => this.triggerQueueUpdate(eventCount), 100);
             }
         } else {
             if (!queueLoading && prevProps.queueLoading === true && queueRequestCounter === 0) {
                 // clear existing timeout if it exists
                 if (this.delayedSetState) clearTimeout(this.delayedSetState);
                 // delay the queue update
-                this.delayedSetState = setTimeout(this.pushQueueData, 100);
+                this.delayedSetState = +setTimeout(this.pushQueueData, 100);
             }
         }
     }
@@ -355,7 +368,7 @@ class QueueManager extends React.Component {
 
             // only set if not already set
             if (!this.automaticUpdateTimer) {
-                this.automaticUpdateTimer = setInterval(() => {
+                this.automaticUpdateTimer = +setInterval(() => {
                     this.props.queueStartSync();
                 }, this.props.automaticUpdateDuration * 1000);
 
@@ -710,7 +723,7 @@ class QueueManager extends React.Component {
             });
     };
 
-    shareInviteBankInquiriesUpdate = (user_id, account_id, olderId = false, eventCount = 200) => {
+    shareInviteBankInquiriesUpdate = (user_id, account_id, olderId: boolean | number = false, eventCount = 200) => {
         const { BunqJSClient } = this.props;
 
         if (olderId !== false) this.props.queueIncreaseRequestCounter();
@@ -789,7 +802,7 @@ class QueueManager extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         userLoading: state.user.loading,
@@ -810,21 +823,21 @@ const mapStateToProps = state => {
         queueLoading: state.queue.loading,
 
         payments: state.payments.payments,
-        bunqMeTabs: state.bunq_me_tabs.bunq_me_tabs,
+        bunqMeTabs: state.bunqMeTabs.bunq_me_tabs,
         masterCardActions: state.master_card_actions.master_card_actions,
         requestInquiries: state.request_inquiries.request_inquiries,
         requestInquiryBatches: state.request_inquiry_batches.request_inquiry_batches,
         requestResponses: state.request_responses.request_responses,
         shareInviteBankInquiries: state.share_invite_monetary_account_inquiries.share_invite_monetary_account_inquiries,
         shareInviteMonetaryAccountResponses:
-            state.share_invite_monetary_account_responses.share_invite_monetary_account_responses
+        state.share_invite_monetary_account_responses.share_invite_monetary_account_responses
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
+const mapDispatchToProps = (dispatch: AppDispatch, ownProps: IProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        openSnackbar: (message, duration = 4000) => dispatch(openSnackbar(message, duration)),
+        openSnackbar: (message, duration = 4000) => dispatch(snackbarActions.open({ message, duration })),
 
         queueDecreaseRequestCounter: () => dispatch(queueDecreaseRequestCounter()),
         queueIncreaseRequestCounter: () => dispatch(queueIncreaseRequestCounter()),
@@ -835,7 +848,12 @@ const mapDispatchToProps = (dispatch, ownProps) => {
 
         paymentsSetInfo: (payments, accountId) => dispatch(paymentsSetInfo(payments, accountId, false, BunqJSClient)),
         bunqMeTabsSetInfo: (bunqMeTabs, accountId) =>
-            dispatch(bunqMeTabsSetInfo(bunqMeTabs, accountId, false, BunqJSClient)),
+            dispatch(bunqMeTabsActions.setInfo({
+                bunqMeTabs,
+                account_id: accountId,
+                resetOldItems: false,
+                BunqJSClient
+            })),
         masterCardActionsSetInfo: (masterCardActions, accountId) =>
             dispatch(masterCardActionsSetInfo(masterCardActions, accountId, false, BunqJSClient)),
         requestInquiriesSetInfo: (requestInquiries, accountId) =>
diff --git a/src/react/Components/Queue/QueueSidebarListItem.jsx b/src/components/Queue/QueueSidebarListItem.tsx
similarity index 92%
rename from src/react/Components/Queue/QueueSidebarListItem.jsx
rename to src/components/Queue/QueueSidebarListItem.tsx
index 977d9fce..f0e80c24 100644
--- a/src/react/Components/Queue/QueueSidebarListItem.jsx
+++ b/src/components/Queue/QueueSidebarListItem.tsx
@@ -7,7 +7,7 @@ import LinearProgress from "@material-ui/core/LinearProgress";
 
 import SyncIcon from "@material-ui/icons/Sync";
 
-import { queueStartSync } from "../../Actions/queue";
+import { queueStartSync } from "~actions/queue";
 
 const styles = {
     listItemText: {
@@ -15,7 +15,10 @@ const styles = {
     }
 };
 
-class QueueSidebarListItem extends React.Component {
+class QueueSidebarListItem extends React.Component<any> {
+    state: any;
+    updateDelay: null | number;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -33,7 +36,7 @@ class QueueSidebarListItem extends React.Component {
             nextProps.queueMaxRequestCounter !== this.state.queueMaxRequestCounter
         ) {
             if (this.updateDelay) clearTimeout(this.updateDelay);
-            this.updateDelay = setTimeout(this.setQueueRequestCounter, 250);
+            this.updateDelay = +setTimeout(this.setQueueRequestCounter, 250);
         }
 
         if (nextProps.queueLoading !== this.props.queueLoading) return true;
@@ -71,7 +74,7 @@ class QueueSidebarListItem extends React.Component {
         }
 
         const clickDisabled = queueLoading || queueTriggerSync;
-        const listItemProps = {
+        const listItemProps: any = {
             key: "listItem"
         };
 
@@ -81,7 +84,7 @@ class QueueSidebarListItem extends React.Component {
         }
 
         return (
-            <React.Fragment>
+            <>
                 <ListItem {...listItemProps}>
                     <ListItemIcon key="icon">
                         <SyncIcon />
@@ -94,7 +97,7 @@ class QueueSidebarListItem extends React.Component {
                     />
                 </ListItem>
                 {queueLoading && <LinearProgress key="progress" variant="determinate" value={currentPercentage} />}
-            </React.Fragment>
+            </>
         );
     }
 }
diff --git a/src/react/Components/ReactJsonWrapper.jsx b/src/components/ReactJsonWrapper.tsx
similarity index 100%
rename from src/react/Components/ReactJsonWrapper.jsx
rename to src/components/ReactJsonWrapper.tsx
diff --git a/src/react/Components/ReduxForm/Fields/renderAccountsPicker.jsx b/src/components/ReduxForm/Fields/renderAccountsPicker.tsx
similarity index 100%
rename from src/react/Components/ReduxForm/Fields/renderAccountsPicker.jsx
rename to src/components/ReduxForm/Fields/renderAccountsPicker.tsx
diff --git a/src/react/Components/ReduxForm/Fields/renderAmountField.jsx b/src/components/ReduxForm/Fields/renderAmountField.tsx
similarity index 100%
rename from src/react/Components/ReduxForm/Fields/renderAmountField.jsx
rename to src/components/ReduxForm/Fields/renderAmountField.tsx
diff --git a/src/react/Components/ReduxForm/Fields/renderColorPickerGradient.jsx b/src/components/ReduxForm/Fields/renderColorPickerGradient.tsx
similarity index 100%
rename from src/react/Components/ReduxForm/Fields/renderColorPickerGradient.jsx
rename to src/components/ReduxForm/Fields/renderColorPickerGradient.tsx
diff --git a/src/react/Components/ReduxForm/Fields/renderDateTimePicker.jsx b/src/components/ReduxForm/Fields/renderDateTimePicker.tsx
similarity index 92%
rename from src/react/Components/ReduxForm/Fields/renderDateTimePicker.jsx
rename to src/components/ReduxForm/Fields/renderDateTimePicker.tsx
index 6339480b..97ed9171 100644
--- a/src/react/Components/ReduxForm/Fields/renderDateTimePicker.jsx
+++ b/src/components/ReduxForm/Fields/renderDateTimePicker.tsx
@@ -3,7 +3,7 @@ import { translate } from "react-i18next";
 import DateTimePicker from "material-ui-pickers/DateTimePicker";
 import Typography from "@material-ui/core/Typography";
 
-import { getUTCDate, UTCDateToLocalDate } from "../../../Functions/Utils";
+import { getUTCDate, UTCDateToLocalDate } from "~functions/Utils";
 
 const styles = {
     dateTimePicker: {}
@@ -35,7 +35,7 @@ const renderDateTimePicker = ({ t, i18n, tReady, input, label, meta: { touched,
     };
 
     return (
-        <React.Fragment>
+        <>
             <DateTimePicker
                 key={label}
                 format="MMMM dd, yyyy HH:mm"
@@ -53,7 +53,7 @@ const renderDateTimePicker = ({ t, i18n, tReady, input, label, meta: { touched,
                 {...custom}
             />
             {errorLabel}
-        </React.Fragment>
+        </>
     );
 };
 
diff --git a/src/react/Components/ReduxForm/Fields/renderTextField.jsx b/src/components/ReduxForm/Fields/renderTextField.tsx
similarity index 100%
rename from src/react/Components/ReduxForm/Fields/renderTextField.jsx
rename to src/components/ReduxForm/Fields/renderTextField.tsx
diff --git a/src/react/Components/ReduxForm/Validators.js b/src/components/ReduxForm/Validators.ts
similarity index 96%
rename from src/react/Components/ReduxForm/Validators.js
rename to src/components/ReduxForm/Validators.ts
index 9fcc5222..b030b07a 100644
--- a/src/react/Components/ReduxForm/Validators.js
+++ b/src/components/ReduxForm/Validators.ts
@@ -1,5 +1,5 @@
 import EmailValidator from "email-validator";
-import { isValidPhonenumber } from "../../Functions/PhoneLib";
+import { isValidPhonenumber } from "~functions/PhoneLib";
 
 const t = window.t;
 
diff --git a/src/react/Routes.jsx b/src/components/Routes.tsx
similarity index 80%
rename from src/react/Routes.jsx
rename to src/components/Routes.tsx
index d8c7b17f..5ee1966a 100644
--- a/src/react/Routes.jsx
+++ b/src/components/Routes.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 import { Route, Switch } from "react-router-dom";
 
-import PrivateRoute from "./Components/Routing/PrivateRoute";
-import PublicRoute from "./Components/Routing/PublicRoute";
-import CL from "./Components/CodeSplitting/ComponentLoader";
+import PrivateRoute from "~components/Routing/PrivateRoute";
+import PublicRoute from "~components/Routing/PublicRoute";
+import CL from "~components/CodeSplitting/ComponentLoader";
 
-import Dashboard from "./Pages/Dashboard/Dashboard";
-import NotFound from "./Pages/NotFound";
-import LoginPassword from "./Pages/LoginPassword";
-import Login from "./Pages/Login/Login";
+import Dashboard from "~pages/Dashboard/Dashboard";
+import NotFound from "~pages/NotFound";
+import LoginPassword from "~pages/LoginPassword";
+import Login from "~pages/Login/Login";
 
 const privateRoutes = [
     /**
@@ -21,28 +21,28 @@ const privateRoutes = [
     },
     {
         path: "/pay",
-        component: CL(() => import(/* webpackChunkName: "pay" */ "./Pages/Pay/Pay"))
+        component: CL(() => import(/* webpackChunkName: "pay" */ "~pages/Pay/Pay"))
     },
     {
         path: "/request",
-        component: CL(() => import(/* webpackChunkName: "requestinquiry" */ "./Pages/RequestInquiry/RequestInquiry"))
+        component: CL(() => import(/* webpackChunkName: "requestinquiry" */ "~pages/RequestInquiry/RequestInquiry"))
     },
     {
         path: "/bunqme-tab",
-        component: CL(() => import(/* webpackChunkName: "bunqmetab" */ "./Pages/BunqMeTab/BunqMeTab"))
+        component: CL(() => import(/* webpackChunkName: "bunqmetab" */ "~pages/BunqMeTab/BunqMeTab"))
     },
     {
         path: "/bunqme-personal",
-        component: CL(() => import(/* webpackChunkName: "bunqmepersonal" */ "./Pages/BunqMePersonal/BunqMePersonal"))
+        component: CL(() => import(/* webpackChunkName: "bunqmepersonal" */ "~pages/BunqMePersonal/BunqMePersonal"))
     },
     {
         path: "/cards",
-        component: CL(() => import(/* webpackChunkName: "cards" */ "./Pages/Cards/Cards"))
+        component: CL(() => import(/* webpackChunkName: "cards" */ "~pages/Cards/Cards"))
     },
     {
         path: "/scheduled-payments",
         component: CL(() =>
-            import(/* webpackChunkName: "scheduled_payments" */ "./Pages/ScheduledPayments/ScheduledPayments")
+            import(/* webpackChunkName: "scheduled_payments" */ "~pages/ScheduledPayments/ScheduledPayments")
         )
     },
     /**
@@ -50,42 +50,42 @@ const privateRoutes = [
      */
     {
         path: "/exports",
-        component: CL(() => import(/* webpackChunkName: "exports" */ "./Pages/Exports"))
+        component: CL(() => import(/* webpackChunkName: "exports" */ "~pages/Exports"))
     },
     {
         path: "/pending-payments",
-        component: CL(() => import(/* webpackChunkName: "pendingPayments" */ "./Pages/PendingPayments/PendingPayments"))
+        component: CL(() => import(/* webpackChunkName: "pendingPayments" */ "~pages/PendingPayments/PendingPayments"))
     },
     {
         path: "/stats",
-        component: CL(() => import(/* webpackChunkName: "stats" */ "./Pages/Stats/Stats"))
+        component: CL(() => import(/* webpackChunkName: "stats" */ "~pages/Stats/Stats"))
     },
     {
         path: "/contacts",
-        component: CL(() => import(/* webpackChunkName: "contacts" */ "./Pages/Contacts/Contacts"))
+        component: CL(() => import(/* webpackChunkName: "contacts" */ "~pages/Contacts/Contacts"))
     },
     {
         path: "/category-dashboard",
         component: CL(() =>
-            import(/* webpackChunkName: "category_dashboard" */ "./Pages/CategoryDashboard/CategoryDashboard")
+            import(/* webpackChunkName: "category_dashboard" */ "~pages/CategoryDashboard/CategoryDashboard")
         )
     },
     {
         path: "/rules-dashboard",
-        component: CL(() => import(/* webpackChunkName: "rules_dashboard" */ "./Pages/RuleDashboard/RuleDashboard"))
+        component: CL(() => import(/* webpackChunkName: "rules_dashboard" */ "~pages/RuleDashboard/RuleDashboard"))
     },
     {
         path: "/rule-page/:ruleId",
-        component: CL(() => import(/* webpackChunkName: "rules_page" */ "./Pages/RulePage/RulePage"))
+        component: CL(() => import(/* webpackChunkName: "rules_page" */ "~pages/RulePage/RulePage"))
     },
     {
         path: "/savings-goals",
-        component: CL(() => import(/* webpackChunkName: "savings_goals" */ "./Pages/SavingsGoals/SavingsGoals"))
+        component: CL(() => import(/* webpackChunkName: "savings_goals" */ "~pages/SavingsGoals/SavingsGoals"))
     },
     {
         path: "/savings-goal-page/:savingsGoalId",
         component: CL(() =>
-            import(/* webpackChunkName: "savings_goal_page" */ "./Pages/SavingsGoalPage/SavingsGoalPage")
+            import(/* webpackChunkName: "savings_goal_page" */ "~pages/SavingsGoalPage/SavingsGoalPage")
         )
     },
     /**
@@ -93,40 +93,40 @@ const privateRoutes = [
      */
     {
         path: "/payment/:paymentId/:accountId?",
-        component: CL(() => import(/* webpackChunkName: "paymentinfo" */ "./Pages/PaymentInfo"))
+        component: CL(() => import(/* webpackChunkName: "paymentinfo" */ "~pages/PaymentInfo"))
     },
     {
         path: "/request-response-info/:requestResponseId/:accountId?",
         component: CL(() =>
-            import(/* webpackChunkName: "requestresponseinfo" */ "./Pages/RequestResponseInfo/RequestResponseInfo")
+            import(/* webpackChunkName: "requestresponseinfo" */ "~pages/RequestResponseInfo/RequestResponseInfo")
         )
     },
     {
         path: "/request-inquiry-info/:requestInquiryId/:accountId?",
-        component: CL(() => import(/* webpackChunkName: "requestinquiryinfo" */ "./Pages/RequestInquiryInfo"))
+        component: CL(() => import(/* webpackChunkName: "requestinquiryinfo" */ "~pages/RequestInquiryInfo"))
     },
     {
         path: "/mastercard-action-info/:masterCardActionId/:accountId?",
-        component: CL(() => import(/* webpackChunkName: "mastercardactioninfo" */ "./Pages/MasterCardActionInfo"))
+        component: CL(() => import(/* webpackChunkName: "mastercardactioninfo" */ "~pages/MasterCardActionInfo"))
     },
     /**
      * Monetary account info and settings pages
      */
     {
         path: "/account-info/:accountId",
-        component: CL(() => import(/* webpackChunkName: "accountinfo" */ "./Pages/AccountInfo"))
+        component: CL(() => import(/* webpackChunkName: "accountinfo" */ "~pages/AccountInfo"))
     },
     {
         path: "/new-account",
-        component: CL(() => import(/* webpackChunkName: "addaccount" */ "./Pages/AddAccount"))
+        component: CL(() => import(/* webpackChunkName: "addaccount" */ "~pages/AddAccount"))
     },
     {
         path: "/connect/:accountId",
-        component: CL(() => import(/* webpackChunkName: "connect" */ "./Pages/Connect/Connect"))
+        component: CL(() => import(/* webpackChunkName: "connect" */ "~pages/Connect/Connect"))
     },
     {
         path: "/profile",
-        component: CL(() => import(/* webpackChunkName: "profile" */ "./Pages/Profile/Profile"))
+        component: CL(() => import(/* webpackChunkName: "profile" */ "~pages/Profile/Profile"))
     }
 ];
 
@@ -134,19 +134,19 @@ const privateRoutes = [
 const standardRoutes = [
     {
         path: "/settings",
-        component: CL(() => import(/* webpackChunkName: "settings" */ "./Pages/Settings/Settings"))
+        component: CL(() => import(/* webpackChunkName: "settings" */ "~pages/Settings/Settings"))
     },
     {
         path: "/application-info",
-        component: CL(() => import(/* webpackChunkName: "applicationinfo" */ "./Pages/ApplicationInfo"))
+        component: CL(() => import(/* webpackChunkName: "applicationinfo" */ "~pages/ApplicationInfo"))
     },
     {
         path: "/debug-page",
-        component: CL(() => import(/* webpackChunkName: "debug" */ "./Pages/DebugPage"))
+        component: CL(() => import(/* webpackChunkName: "debug" */ "~pages/DebugPage"))
     },
     {
         path: "/disclaimer",
-        component: CL(() => import(/* webpackChunkName: "disclaimer" */ "./Pages/Disclaimer"))
+        component: CL(() => import(/* webpackChunkName: "disclaimer" */ "~pages/Disclaimer"))
     },
     {
         path: "/login",
@@ -154,7 +154,7 @@ const standardRoutes = [
     },
     {
         path: "/switch-api-keys",
-        component: CL(() => import(/* webpackChunkName: "switch_api_keys" */ "./Pages/SwitchApiKeys"))
+        component: CL(() => import(/* webpackChunkName: "switch_api_keys" */ "~pages/SwitchApiKeys"))
     }
 ];
 
diff --git a/src/react/Components/Routing/NavLink.jsx b/src/components/Routing/NavLink.tsx
similarity index 91%
rename from src/react/Components/Routing/NavLink.jsx
rename to src/components/Routing/NavLink.tsx
index 07330642..52db9825 100644
--- a/src/react/Components/Routing/NavLink.jsx
+++ b/src/components/Routing/NavLink.tsx
@@ -1,4 +1,3 @@
-// modules/NavLink.js
 import React from "react";
 import { NavLink } from "react-router-dom";
 
diff --git a/src/react/Components/Routing/PrivateRoute.jsx b/src/components/Routing/PrivateRoute.tsx
similarity index 100%
rename from src/react/Components/Routing/PrivateRoute.jsx
rename to src/components/Routing/PrivateRoute.tsx
diff --git a/src/react/Components/Routing/PublicRoute.jsx b/src/components/Routing/PublicRoute.tsx
similarity index 100%
rename from src/react/Components/Routing/PublicRoute.jsx
rename to src/components/Routing/PublicRoute.tsx
diff --git a/src/react/Components/RuleCollectionChecker.jsx b/src/components/RuleCollectionChecker.tsx
similarity index 78%
rename from src/react/Components/RuleCollectionChecker.jsx
rename to src/components/RuleCollectionChecker.tsx
index 8133e7f2..21dd6721 100644
--- a/src/react/Components/RuleCollectionChecker.jsx
+++ b/src/components/RuleCollectionChecker.tsx
@@ -1,14 +1,23 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { connect } from "react-redux";
 
-import { setCategoryConnectionMultiple } from "../Actions/categories";
-import { setCategoryRule } from "../Actions/category_rules";
+import { actions as categoriesActions } from "~store/categories";
+import { actions as categoryRulesActions } from "~store/categoryRules";
+import { AppDispatch, ReduxState } from "~store/index";
 
 // import typed worker
-const RuleCollectionCheckWorker = require("worker-loader!../WebWorkers/rule_collection_check.worker.js");
+const RuleCollectionCheckWorker = require("worker-loader!../webworkers/rule_collection_check.worker.js");
+
+interface IProps {
+}
+
+interface IState {
+}
+
+class RuleCollectionChecker extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+    worker: any;
 
-class RuleCollectionChecker extends React.Component {
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -85,29 +94,25 @@ class RuleCollectionChecker extends React.Component {
     }
 }
 
-RuleCollectionChecker.propTypes = {
-    updateToggle: PropTypes.bool.isRequired
-};
-
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         categories: state.categories.categories,
-        categoryRules: state.category_rules.category_rules,
+        categoryRules: state.categoryRules.category_rules,
 
         queueFinishedSync: state.queue.finished_queue,
 
         requestResponses: state.request_responses.request_responses,
         payments: state.payments.payments,
-        bunqMeTabs: state.bunq_me_tabs.bunq_me_tabs,
+        bunqMeTabs: state.bunqMeTabs.bunq_me_tabs,
         masterCardActions: state.master_card_actions.master_card_actions,
         requestInquiries: state.request_inquiries.request_inquiries
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
-        setCategoryConnectionMultiple: (...params) => dispatch(setCategoryConnectionMultiple(...params)),
-        setCategoryRule: rule_collection => dispatch(setCategoryRule(rule_collection))
+        setCategoryConnectionMultiple: (...params) => dispatch(categoriesActions.setCategoryConnectionMultiple(...params)),
+        setCategoryRule: rule_collection => dispatch(categoryRulesActions.setRule(rule_collection))
     };
 };
 
diff --git a/src/react/Components/SavingsGoals/Helpers.js b/src/components/SavingsGoals/Helpers.ts
similarity index 80%
rename from src/react/Components/SavingsGoals/Helpers.js
rename to src/components/SavingsGoals/Helpers.ts
index 835ad0b6..71560ff8 100644
--- a/src/react/Components/SavingsGoals/Helpers.js
+++ b/src/components/SavingsGoals/Helpers.ts
@@ -1,6 +1,6 @@
-import { connectGetBudget } from "../../Functions/ConnectGetPermissions";
-import { filterShareInviteMonetaryAccountResponses } from "../../Functions/DataFilters";
-import { formatMoney } from "../../Functions/Utils";
+import { connectGetBudget } from "~functions/ConnectGetPermissions";
+import { filterShareInviteMonetaryAccountResponses } from "~functions/DataFilters";
+import { formatMoney } from "~functions/Utils";
 
 export const calculateTotalBalance = (accounts, accountIds, shareInviteMonetaryAccountResponses = []) => {
     return accounts.reduce((accumulator, account) => {
diff --git a/src/react/Components/SavingsGoals/SavingsGoalListItem.jsx b/src/components/SavingsGoals/SavingsGoalListItem.tsx
similarity index 97%
rename from src/react/Components/SavingsGoals/SavingsGoalListItem.jsx
rename to src/components/SavingsGoals/SavingsGoalListItem.tsx
index 837a8dcc..43ee9a3f 100644
--- a/src/react/Components/SavingsGoals/SavingsGoalListItem.jsx
+++ b/src/components/SavingsGoals/SavingsGoalListItem.tsx
@@ -12,7 +12,7 @@ import ExpiredIcon from "@material-ui/icons/TimerOff";
 import LinearProgressCustom from "../LinearProgress";
 import NavLink from "../Routing/NavLink";
 
-import { formatMoney, humanReadableDate } from "../../Functions/Utils";
+import { formatMoney, humanReadableDate } from "~functions/Utils";
 
 const styles = {
     listItem: {
@@ -105,7 +105,7 @@ export default props => {
                         </Grid>
 
                         {percentage < 100 && (
-                            <React.Fragment>
+                            <>
                                 <Grid item xs={4} sm={3} md={2} lg={1} />
                                 <Grid item xs={4} sm={6} md={8} lg={10} style={styles.progressLabelGrid}>
                                     <div style={progressLabelStyle}>
@@ -113,7 +113,7 @@ export default props => {
                                     </div>
                                 </Grid>
                                 <Grid item xs={4} sm={3} md={2} lg={1} />
-                            </React.Fragment>
+                            </>
                         )}
                     </Grid>
                 </ListItem>
diff --git a/src/react/Components/SavingsGoals/SavingsGoalListItemWrapper.jsx b/src/components/SavingsGoals/SavingsGoalListItemWrapper.tsx
similarity index 97%
rename from src/react/Components/SavingsGoals/SavingsGoalListItemWrapper.jsx
rename to src/components/SavingsGoals/SavingsGoalListItemWrapper.tsx
index e85eb035..b25a07fe 100644
--- a/src/react/Components/SavingsGoals/SavingsGoalListItemWrapper.jsx
+++ b/src/components/SavingsGoals/SavingsGoalListItemWrapper.tsx
@@ -5,7 +5,7 @@ import { connect } from "react-redux";
 import SavingsGoalListItem from "./SavingsGoalListItem";
 import SavingsGoalSmallListItem from "./SavingsGoalSmallListItem";
 
-import SavingsGoal from "../../Models/SavingsGoal";
+import SavingsGoal from "~models/SavingsGoal";
 
 const SavingsGoalListItemWrapper = props => {
     const {
diff --git a/src/react/Components/SavingsGoals/SavingsGoalSmallListItem.jsx b/src/components/SavingsGoals/SavingsGoalSmallListItem.tsx
similarity index 100%
rename from src/react/Components/SavingsGoals/SavingsGoalSmallListItem.jsx
rename to src/components/SavingsGoals/SavingsGoalSmallListItem.tsx
diff --git a/src/react/Components/SavingsGoals/SavingsGoalsList.jsx b/src/components/SavingsGoals/SavingsGoalsList.tsx
similarity index 100%
rename from src/react/Components/SavingsGoals/SavingsGoalsList.jsx
rename to src/components/SavingsGoals/SavingsGoalsList.tsx
diff --git a/src/react/Components/Sidebar.jsx b/src/components/Sidebar.tsx
similarity index 98%
rename from src/react/Components/Sidebar.jsx
rename to src/components/Sidebar.tsx
index 7173d2ba..43d772aa 100644
--- a/src/react/Components/Sidebar.jsx
+++ b/src/components/Sidebar.tsx
@@ -27,9 +27,9 @@ import TrophyIcon from "./CustomSVG/Trophy";
 import QueueSidebarListItem from "./Queue/QueueSidebarListItem";
 import NavLink from "./Routing/NavLink";
 import ListItemWrapper from "./ListItemWrapper";
-import IsDarwin from "../Functions/IsDarwin";
+import IsDarwin from "~functions/IsDarwin";
 
-import { closeSidebar } from "../Actions/sidebar";
+import { closeSidebar } from "~actions/sidebar";
 
 const styles = {
     list: {
@@ -178,7 +178,7 @@ class Sidebar extends React.Component {
         if (this.props.stickyMenu) {
             // dynamic menu with a hidden menu on smaller screens
             return (
-                <React.Fragment>
+                <>
                     <Hidden mdUp>
                         <Drawer
                             variant="temporary"
@@ -207,7 +207,7 @@ class Sidebar extends React.Component {
                             {drawerList}
                         </Drawer>
                     </Hidden>
-                </React.Fragment>
+                </>
             );
         } else {
             // menu is always hidden by default
diff --git a/src/react/Components/SpeedDial.jsx b/src/components/SpeedDial.tsx
similarity index 100%
rename from src/react/Components/SpeedDial.jsx
rename to src/components/SpeedDial.tsx
diff --git a/src/react/Components/SwitchKeysMenu.jsx b/src/components/SwitchKeysMenu.tsx
similarity index 98%
rename from src/react/Components/SwitchKeysMenu.jsx
rename to src/components/SwitchKeysMenu.tsx
index e38e4883..b8de3149 100644
--- a/src/react/Components/SwitchKeysMenu.jsx
+++ b/src/components/SwitchKeysMenu.tsx
@@ -21,7 +21,7 @@ import {
     registrationRemoveStoredApiKey,
     registrationSetStoredApiKeys,
     registrationSwitchKeys
-} from "../Actions/registration";
+} from "~actions/registration";
 
 const styles = {
     list: {
@@ -156,7 +156,7 @@ class SwitchKeysMenu extends React.Component {
         });
 
         return (
-            <React.Fragment>
+            <>
                 <IconButton onClick={this.toggleOpen}>
                     <KeyIcon />
                 </IconButton>
@@ -199,7 +199,7 @@ class SwitchKeysMenu extends React.Component {
                         </ListItem>
                     </List>
                 </Drawer>
-            </React.Fragment>
+            </>
         );
     }
 }
diff --git a/src/react/Components/TransactionHeader.jsx b/src/components/TransactionHeader.tsx
similarity index 99%
rename from src/react/Components/TransactionHeader.jsx
rename to src/components/TransactionHeader.tsx
index 60de28ba..9763a56f 100644
--- a/src/react/Components/TransactionHeader.jsx
+++ b/src/components/TransactionHeader.tsx
@@ -14,7 +14,7 @@ import {
     defaultMastercardImage,
     defaultRequestResponseImage,
     defaultPaymentImage
-} from "../Functions/DefaultImageHandlers";
+} from "~functions/DefaultImageHandlers";
 
 const styles = {
     targetWrapper: {
diff --git a/src/react/Components/TranslationHelpers/Button.jsx b/src/components/TranslationHelpers/Button.tsx
similarity index 100%
rename from src/react/Components/TranslationHelpers/Button.jsx
rename to src/components/TranslationHelpers/Button.tsx
diff --git a/src/react/Components/TranslationHelpers/MenuItem.jsx b/src/components/TranslationHelpers/MenuItem.tsx
similarity index 100%
rename from src/react/Components/TranslationHelpers/MenuItem.jsx
rename to src/components/TranslationHelpers/MenuItem.tsx
diff --git a/src/react/Components/TranslationHelpers/Typography.jsx b/src/components/TranslationHelpers/Typography.tsx
similarity index 100%
rename from src/react/Components/TranslationHelpers/Typography.jsx
rename to src/components/TranslationHelpers/Typography.tsx
diff --git a/src/react/i18n.jsx b/src/components/i18n.tsx
similarity index 89%
rename from src/react/i18n.jsx
rename to src/components/i18n.tsx
index 47b159ed..beb5a56c 100644
--- a/src/react/i18n.jsx
+++ b/src/components/i18n.tsx
@@ -2,8 +2,8 @@ import i18n from "i18next";
 import Backend from "i18next-xhr-backend";
 import { reactI18nextModule } from "react-i18next";
 
-import fs from "./ImportWrappers/fs";
-import path from "./ImportWrappers/path";
+import fs from "~importwrappers/fs";
+import path from "~importwrappers/path";
 
 /**
  * Adds a new key to the reference locale data
@@ -12,7 +12,7 @@ import path from "./ImportWrappers/path";
  */
 const addLocaleKey = async data => {
     // get the current localeData
-    const localeData = require("./Locales/en.json");
+    const localeData = require("~locales/en.json");
 
     // go through all the missing keys for this language
     Object.keys(data).forEach(missingKey => {
@@ -33,7 +33,7 @@ const addLocaleKey = async data => {
         });
 
     try {
-        const targetPath = path.join(__dirname, "../src/react/Locales/en.json");
+        const targetPath = path.join(__dirname, "../locales/en.json");
 
         // write the updated file back to the locale files
         fs.writeFileSync(targetPath, JSON.stringify(tempLocaleData, null, "\t"));
@@ -52,7 +52,7 @@ const loadLocales = (url, options, callback, data) => {
 
     if (action === "LOAD") {
         try {
-            const locale = require("./Locales/" + language + ".json");
+            const locale = require("~locales/" + language + ".json");
             callback(locale, { status: "200" });
         } catch (e) {
             console.error(e);
diff --git a/src/react/react-app.jsx b/src/components/react-app.tsx
similarity index 89%
rename from src/react/react-app.jsx
rename to src/components/react-app.tsx
index 0589bc70..05a1c674 100644
--- a/src/react/react-app.jsx
+++ b/src/components/react-app.tsx
@@ -12,8 +12,8 @@ import "../scss/main.scss";
 import "animate.css";
 import "typeface-roboto";
 
-import Logger from "./Functions/Logger";
-import Analytics from "./Functions/Analytics";
+import Logger from "~functions/Logger";
+import Analytics from "~functions/Analytics";
 
 Analytics();
 
diff --git a/src/env.js b/src/env.ts
similarity index 100%
rename from src/env.js
rename to src/env.ts
diff --git a/src/react/Functions/Analytics.js b/src/functions/Analytics.ts
similarity index 93%
rename from src/react/Functions/Analytics.js
rename to src/functions/Analytics.ts
index b25bb226..015f647b 100644
--- a/src/react/Functions/Analytics.js
+++ b/src/functions/Analytics.ts
@@ -1,8 +1,8 @@
 import store from "store";
-import settings from "../ImportWrappers/electronSettings";
+import settings from "~importwrappers/electronSettings";
 import { generateGUID } from "./Utils";
 import Logger from "./Logger";
-import { ANALYTICS_ENABLED } from "../Reducers/options";
+import { ANALYTICS_ENABLED } from "~reducers/options";
 
 export default (forceEnable = false) => {
     if (process.env.NODE_ENV === "development") {
diff --git a/src/react/Functions/BunqErrorHandler.js b/src/functions/BunqErrorHandler.ts
similarity index 66%
rename from src/react/Functions/BunqErrorHandler.js
rename to src/functions/BunqErrorHandler.ts
index 4c09ed81..fc9dac9c 100644
--- a/src/react/Functions/BunqErrorHandler.js
+++ b/src/functions/BunqErrorHandler.ts
@@ -1,14 +1,18 @@
+import BunqDesktopClient from "~components/BunqDesktopClient";
+import { BatchedActions } from "~store/index";
 import Logger from "./Logger";
 
-import { openModal } from "../Actions/modal";
-import { openSnackbar } from "../Actions/snackbar";
-import { applicationSetOffline } from "../Actions/application";
-import { registrationResetToApiScreen } from "../Actions/registration";
+import { openModal } from "~actions/modal";
+import { registrationResetToApiScreen } from "~actions/registration";
+import { actions as snackbarActions } from "~store/snackbar";
+import { actions as applicationActions } from "~store/application";
 
 import ErrorCodes from "@bunq-community/bunq-js-client/dist/Helpers/ErrorCodes";
 
-const defaultErrorMessage = (dispatch, customError = false) => {
-    dispatch(
+declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+
+const defaultErrorMessage = (batchedActions: BatchedActions, customError: boolean | string = false) => {
+    batchedActions.push(
         openModal(
             customError ? customError : "Something went wrong while trying to send a request",
             "Something went wrong"
@@ -16,14 +20,7 @@ const defaultErrorMessage = (dispatch, customError = false) => {
     );
 };
 
-/**
- * @param dispatch
- * @param error
- * @param {boolean|string} customError
- * @param {boolean|BunqJSClient} BunqJSClient
- * @returns {*}
- */
-export default (dispatch, error, customError = false, BunqJSClient = false) => {
+export default (batchedActions: BatchedActions, error, customError: boolean | string = false, BunqJSClient = false) => {
     const response = error.response;
 
     const offlineError = window.t("We received a network error while trying to send a request! You might be offline");
@@ -39,10 +36,10 @@ export default (dispatch, error, customError = false, BunqJSClient = false) => {
     // check if a network error occured
     if (error.toString() === "Error: Network Error") {
         // show a less intrusive error using the snackbar
-        dispatch(openSnackbar(offlineError));
+        batchedActions.push(snackbarActions.open(offlineError));
 
         // enable offline mode
-        dispatch(applicationSetOffline());
+        batchedActions.push(applicationActions.setOffline());
         return;
     }
 
@@ -50,13 +47,13 @@ export default (dispatch, error, customError = false, BunqJSClient = false) => {
         switch (error.errorCode) {
             // invalid response or it couldn't be verified
             case ErrorCodes.INVALID_RESPONSE_RECEIVED:
-                return defaultErrorMessage(dispatch, invalidResponseError);
+                return defaultErrorMessage(batchedActions, invalidResponseError);
         }
     }
 
     // fallback to a default message
     if (!response) {
-        return defaultErrorMessage(dispatch, customError);
+        return defaultErrorMessage(batchedActions, customError);
     }
 
     // check if we can display a bunq error
@@ -86,13 +83,15 @@ export default (dispatch, error, customError = false, BunqJSClient = false) => {
                     errorMessage = invalidAuthenticationError;
 
                     // reset to api screen if possible
-                    if (BunqJSClient) dispatch(registrationResetToApiScreen(BunqJSClient));
+                    if (BunqJSClient) {
+                        batchedActions.push(registrationResetToApiScreen(BunqJSClient));
+                    }
                     break;
             }
 
-            return dispatch(openModal(`${message}:\n ${errorMessage}${responseIdText}`, "Something went wrong"));
+            return batchedActions.push(openModal(`${message}:\n ${errorMessage}${responseIdText}`, "Something went wrong"));
         }
     }
 
-    return defaultErrorMessage(dispatch, customError);
+    return defaultErrorMessage(batchedActions, customError);
 };
diff --git a/src/react/Functions/ConnectGetPermissions.js b/src/functions/ConnectGetPermissions.ts
similarity index 98%
rename from src/react/Functions/ConnectGetPermissions.js
rename to src/functions/ConnectGetPermissions.ts
index d4f1afd9..4fd199fe 100644
--- a/src/react/Functions/ConnectGetPermissions.js
+++ b/src/functions/ConnectGetPermissions.ts
@@ -36,7 +36,7 @@ export const connectGetType = (shareInviteMonetaryAccountResponses, accountId) =
     return true;
 };
 
-export const connectGetBudget = (shareInviteMonetaryAccountResponses, accountId) => {
+export const connectGetBudget = (shareInviteMonetaryAccountResponses, accountId = undefined) => {
     let inviteResponse = null;
     if (accountId) {
         inviteResponse = getInviteResponse(shareInviteMonetaryAccountResponses, accountId);
diff --git a/src/react/Functions/Crypto/Crypto.js b/src/functions/Crypto/Crypto.ts
similarity index 100%
rename from src/react/Functions/Crypto/Crypto.js
rename to src/functions/Crypto/Crypto.ts
diff --git a/src/react/Functions/Crypto/CryptoWorkerWrapper.js b/src/functions/Crypto/CryptoWorkerWrapper.ts
similarity index 97%
rename from src/react/Functions/Crypto/CryptoWorkerWrapper.js
rename to src/functions/Crypto/CryptoWorkerWrapper.ts
index 475278f2..a02b6439 100644
--- a/src/react/Functions/Crypto/CryptoWorkerWrapper.js
+++ b/src/functions/Crypto/CryptoWorkerWrapper.ts
@@ -1,5 +1,5 @@
 import store from "store";
-const CryptoWorker = require("worker-loader!../../WebWorkers/crypto.worker.js");
+const CryptoWorker = require("worker-loader!../../webworkers/crypto.worker.js");
 
 class CryptoWorkerQueue {
     constructor() {
diff --git a/src/react/Functions/Crypto/CustomForge.js b/src/functions/Crypto/CustomForge.ts
similarity index 100%
rename from src/react/Functions/Crypto/CustomForge.js
rename to src/functions/Crypto/CustomForge.ts
diff --git a/src/react/Functions/DataFilters.js b/src/functions/DataFilters.ts
similarity index 99%
rename from src/react/Functions/DataFilters.js
rename to src/functions/DataFilters.ts
index 4de4e519..1aa29342 100644
--- a/src/react/Functions/DataFilters.js
+++ b/src/functions/DataFilters.ts
@@ -1,4 +1,4 @@
-import CategoryHelper from "../Components/Categories/CategoryHelper";
+import CategoryHelper from "~components/Categories/CategoryHelper";
 
 const checkDateRange = (fromDate, toDate, date) => {
     // nothing to check so always valid
diff --git a/src/react/Functions/DefaultImageHandlers.js b/src/functions/DefaultImageHandlers.ts
similarity index 100%
rename from src/react/Functions/DefaultImageHandlers.js
rename to src/functions/DefaultImageHandlers.ts
diff --git a/src/react/Functions/EventStatusTexts.js b/src/functions/EventStatusTexts.ts
similarity index 100%
rename from src/react/Functions/EventStatusTexts.js
rename to src/functions/EventStatusTexts.ts
diff --git a/src/react/Functions/FilterDisabledChecker.js b/src/functions/FilterDisabledChecker.ts
similarity index 100%
rename from src/react/Functions/FilterDisabledChecker.js
rename to src/functions/FilterDisabledChecker.ts
diff --git a/src/react/Functions/IpChecker.js b/src/functions/IpChecker.ts
similarity index 100%
rename from src/react/Functions/IpChecker.js
rename to src/functions/IpChecker.ts
diff --git a/src/react/Functions/IsDarwin.js b/src/functions/IsDarwin.ts
similarity index 62%
rename from src/react/Functions/IsDarwin.js
rename to src/functions/IsDarwin.ts
index 99b0216b..508b5824 100644
--- a/src/react/Functions/IsDarwin.js
+++ b/src/functions/IsDarwin.ts
@@ -1,4 +1,4 @@
-import os from "../ImportWrappers/os";
+import os from "~importwrappers/os";
 
 export default () => {
     return os.platform() === "darwin";
diff --git a/src/react/Functions/Logger.js b/src/functions/Logger.ts
similarity index 100%
rename from src/react/Functions/Logger.js
rename to src/functions/Logger.ts
diff --git a/src/react/Functions/MergeApiObjects.js b/src/functions/MergeApiObjects.ts
similarity index 100%
rename from src/react/Functions/MergeApiObjects.js
rename to src/functions/MergeApiObjects.ts
diff --git a/src/react/Functions/NoteTextTypeParser.js b/src/functions/NoteTextTypeParser.ts
similarity index 100%
rename from src/react/Functions/NoteTextTypeParser.js
rename to src/functions/NoteTextTypeParser.ts
diff --git a/src/react/Functions/NotificationHelper.js b/src/functions/NotificationHelper.ts
similarity index 100%
rename from src/react/Functions/NotificationHelper.js
rename to src/functions/NotificationHelper.ts
diff --git a/src/react/Functions/PhoneLib.js b/src/functions/PhoneLib.ts
similarity index 100%
rename from src/react/Functions/PhoneLib.js
rename to src/functions/PhoneLib.ts
diff --git a/src/react/Functions/ScheduleTexts.js b/src/functions/ScheduleTexts.ts
similarity index 100%
rename from src/react/Functions/ScheduleTexts.js
rename to src/functions/ScheduleTexts.ts
diff --git a/src/react/Functions/StatsFormattingTemplates.js b/src/functions/StatsFormattingTemplates.ts
similarity index 100%
rename from src/react/Functions/StatsFormattingTemplates.js
rename to src/functions/StatsFormattingTemplates.ts
diff --git a/src/react/Functions/Utils.js b/src/functions/Utils.ts
similarity index 100%
rename from src/react/Functions/Utils.js
rename to src/functions/Utils.ts
diff --git a/src/react/Functions/VersionChecker.js b/src/functions/VersionChecker.ts
similarity index 100%
rename from src/react/Functions/VersionChecker.js
rename to src/functions/VersionChecker.ts
diff --git a/src/helpers/context_menu.js b/src/helpers/context_menu.ts
similarity index 100%
rename from src/helpers/context_menu.js
rename to src/helpers/context_menu.ts
diff --git a/src/helpers/devtools.js b/src/helpers/devtools.ts
similarity index 100%
rename from src/helpers/devtools.js
rename to src/helpers/devtools.ts
diff --git a/src/helpers/external_links.js b/src/helpers/external_links.ts
similarity index 100%
rename from src/helpers/external_links.js
rename to src/helpers/external_links.ts
diff --git a/src/helpers/oauth.js b/src/helpers/oauth.ts
similarity index 100%
rename from src/helpers/oauth.js
rename to src/helpers/oauth.ts
diff --git a/src/helpers/react_navigate.js b/src/helpers/react_navigate.ts
similarity index 100%
rename from src/helpers/react_navigate.js
rename to src/helpers/react_navigate.ts
diff --git a/src/helpers/settings.js b/src/helpers/settings.ts
similarity index 100%
rename from src/helpers/settings.js
rename to src/helpers/settings.ts
diff --git a/src/helpers/shortcuts.js b/src/helpers/shortcuts.ts
similarity index 100%
rename from src/helpers/shortcuts.js
rename to src/helpers/shortcuts.ts
diff --git a/src/helpers/touchbar.js b/src/helpers/touchbar.ts
similarity index 100%
rename from src/helpers/touchbar.js
rename to src/helpers/touchbar.ts
diff --git a/src/helpers/tray.js b/src/helpers/tray.ts
similarity index 100%
rename from src/helpers/tray.js
rename to src/helpers/tray.ts
diff --git a/src/helpers/window.js b/src/helpers/window.ts
similarity index 100%
rename from src/helpers/window.js
rename to src/helpers/window.ts
diff --git a/src/i18n-background.js b/src/i18n-background.ts
similarity index 100%
rename from src/i18n-background.js
rename to src/i18n-background.ts
diff --git a/src/react/ImportWrappers/README.md b/src/importwrappers/README.md
similarity index 100%
rename from src/react/ImportWrappers/README.md
rename to src/importwrappers/README.md
diff --git a/src/react/ImportWrappers/electronSettings.js b/src/importwrappers/electronSettings.ts
similarity index 100%
rename from src/react/ImportWrappers/electronSettings.js
rename to src/importwrappers/electronSettings.ts
diff --git a/src/react/ImportWrappers/fs.js b/src/importwrappers/fs.ts
similarity index 100%
rename from src/react/ImportWrappers/fs.js
rename to src/importwrappers/fs.ts
diff --git a/src/react/ImportWrappers/localforage.js b/src/importwrappers/localforage.ts
similarity index 100%
rename from src/react/ImportWrappers/localforage.js
rename to src/importwrappers/localforage.ts
diff --git a/src/react/ImportWrappers/os.js b/src/importwrappers/os.ts
similarity index 100%
rename from src/react/ImportWrappers/os.js
rename to src/importwrappers/os.ts
diff --git a/src/react/ImportWrappers/path.js b/src/importwrappers/path.ts
similarity index 100%
rename from src/react/ImportWrappers/path.js
rename to src/importwrappers/path.ts
diff --git a/src/react/Locales/Crowdin/.gitkeep b/src/locales/Crowdin/.gitkeep
similarity index 100%
rename from src/react/Locales/Crowdin/.gitkeep
rename to src/locales/Crowdin/.gitkeep
diff --git a/src/react/Locales/de.json b/src/locales/de.json
similarity index 100%
rename from src/react/Locales/de.json
rename to src/locales/de.json
diff --git a/src/react/Locales/en.json b/src/locales/en.json
similarity index 100%
rename from src/react/Locales/en.json
rename to src/locales/en.json
diff --git a/src/react/Locales/es.json b/src/locales/es.json
similarity index 100%
rename from src/react/Locales/es.json
rename to src/locales/es.json
diff --git a/src/react/Locales/gr.json b/src/locales/gr.json
similarity index 100%
rename from src/react/Locales/gr.json
rename to src/locales/gr.json
diff --git a/src/react/Locales/it.json b/src/locales/it.json
similarity index 100%
rename from src/react/Locales/it.json
rename to src/locales/it.json
diff --git a/src/react/Locales/nl.json b/src/locales/nl.json
similarity index 100%
rename from src/react/Locales/nl.json
rename to src/locales/nl.json
diff --git a/src/menu/darwin_menu_templates.js b/src/menu/darwin_menu_templates.ts
similarity index 100%
rename from src/menu/darwin_menu_templates.js
rename to src/menu/darwin_menu_templates.ts
diff --git a/src/menu/dev_menu_template.js b/src/menu/dev_menu_template.ts
similarity index 100%
rename from src/menu/dev_menu_template.js
rename to src/menu/dev_menu_template.ts
diff --git a/src/menu/edit_menu_template.js b/src/menu/edit_menu_template.ts
similarity index 100%
rename from src/menu/edit_menu_template.js
rename to src/menu/edit_menu_template.ts
diff --git a/src/menu/help_menu_template.js b/src/menu/help_menu_template.ts
similarity index 100%
rename from src/menu/help_menu_template.js
rename to src/menu/help_menu_template.ts
diff --git a/src/menu/view_menu_template.js b/src/menu/view_menu_template.ts
similarity index 100%
rename from src/menu/view_menu_template.js
rename to src/menu/view_menu_template.ts
diff --git a/src/menu/window_menu_template.js b/src/menu/window_menu_template.ts
similarity index 100%
rename from src/menu/window_menu_template.js
rename to src/menu/window_menu_template.ts
diff --git a/src/misc/consts.ts b/src/misc/consts.ts
new file mode 100644
index 00000000..5ddadd8a
--- /dev/null
+++ b/src/misc/consts.ts
@@ -0,0 +1,14 @@
+export const STORED_ACCOUNTS = "BUNQDESKTOP_STORED_ACCOUNTS";
+export const SELECTED_ACCOUNT_LOCATION = "BUNQDESKTOP_SELECTED_ACCOUNT";
+export const EXCLUDED_ACCOUNT_IDS = "BUNQDESKTOP_EXCLUDED_ACCOUNT_IDS";
+
+export const STORED_BUNQ_ME_TABS = "BUNQDESKTOP_STORED_BUNQ_ME_TABS";
+
+export const CARD_ORDER_LOCATION = "BUNQDESKTOP_CARD_ORDER";
+
+export const BUNQDESKTOP_CATEGORIES = "BUNQDESKTOP_CATEGORIES";
+export const BUNQDESKTOP_CATEGORY_CONNECTIONS = "BUNQDESKTOP_CATEGORY_CONNECTIONS";
+
+export const STORED_CATEGORY_RULES = "BUNQDESKTOP_STORED_CATEGORY_RULES";
+
+export const STORED_CONTACTS = "BUNQDESKTOP_STORED_CONTACTS";
diff --git a/src/react/Models/BunqMeTab.ts b/src/models/BunqMeTab.ts
similarity index 97%
rename from src/react/Models/BunqMeTab.ts
rename to src/models/BunqMeTab.ts
index 4b5cbbf6..6386b665 100644
--- a/src/react/Models/BunqMeTab.ts
+++ b/src/models/BunqMeTab.ts
@@ -1,5 +1,5 @@
-import { BunqMeTabEntry, BunqMeTabResultInquiry, BunqMeTabStatus } from "../Types/Types";
-import Event, { EventTypeValue } from "../Types/Event";
+import { BunqMeTabEntry, BunqMeTabResultInquiry, BunqMeTabStatus } from "~types/Types";
+import Event, { EventTypeValue } from "~types/Event";
 
 export default class BunqMeTab implements Event {
     // the original raw object
diff --git a/src/react/Models/Card.ts b/src/models/Card.ts
similarity index 98%
rename from src/react/Models/Card.ts
rename to src/models/Card.ts
index 787ed51a..e43574e1 100644
--- a/src/react/Models/Card.ts
+++ b/src/models/Card.ts
@@ -1,4 +1,4 @@
-import { getObjectType } from "../Functions/Utils";
+import { getObjectType } from "~functions/Utils";
 
 import {
     Alias,
@@ -6,7 +6,7 @@ import {
     CountryPermissionCollection,
     PinCodeAssignmentCollection,
     PrimaryAccountNumberCollection
-} from "../Types/Types";
+} from "~types/Types";
 
 export default class Card {
     // the original raw object
diff --git a/src/react/Models/MasterCardAction.ts b/src/models/MasterCardAction.ts
similarity index 98%
rename from src/react/Models/MasterCardAction.ts
rename to src/models/MasterCardAction.ts
index 077d4855..ea0482ae 100644
--- a/src/react/Models/MasterCardAction.ts
+++ b/src/models/MasterCardAction.ts
@@ -1,5 +1,5 @@
-import { Amount, LabelCard, PaymentAlias, RequestReferenceSplitTheBill } from "../Types/Types";
-import Event, { EventTypeValue } from "../Types/Event";
+import { Amount, LabelCard, PaymentAlias, RequestReferenceSplitTheBill } from "~types/Types";
+import Event, { EventTypeValue } from "~types/Event";
 
 export type PanEntryModeUser = "ATM" | "ICC" | "MAGNETIC_STRIPE" | "E_COMMERCE";
 
diff --git a/src/react/Models/MonetaryAccount.ts b/src/models/MonetaryAccount.ts
similarity index 96%
rename from src/react/Models/MonetaryAccount.ts
rename to src/models/MonetaryAccount.ts
index 2907bab7..7005a12e 100644
--- a/src/react/Models/MonetaryAccount.ts
+++ b/src/models/MonetaryAccount.ts
@@ -1,6 +1,6 @@
-import { AccountType, MonetaryAccountSetting, AllCoOwner, Alias, Avatar, Balance, Amount } from "../Types/Types";
+import { AccountType, MonetaryAccountSetting, AllCoOwner, Alias, Avatar, Balance, Amount } from "~types/Types";
 
-import NotificationFilter from "@bunq-community/bunq-js-client/src/Types/NotificationFilter";
+import NotificationFilter from "@bunq-community/bunq-js-client/dist/Types/NotificationFilter";
 
 export default class MonetaryAccount {
     // the original raw object
diff --git a/src/react/Models/Payment.ts b/src/models/Payment.ts
similarity index 98%
rename from src/react/Models/Payment.ts
rename to src/models/Payment.ts
index 3dae06ca..882413dc 100644
--- a/src/react/Models/Payment.ts
+++ b/src/models/Payment.ts
@@ -7,8 +7,8 @@ import {
     PaymentSubType,
     PaymentType,
     RequestReferenceSplitTheBill
-} from "../Types/Types";
-import Event, { EventTypeValue } from "../Types/Event";
+} from "~types/Types";
+import Event, { EventTypeValue } from "~types/Event";
 
 export default class Payment implements Event {
     // the original raw object
diff --git a/src/react/Models/RequestInquiry.ts b/src/models/RequestInquiry.ts
similarity index 98%
rename from src/react/Models/RequestInquiry.ts
rename to src/models/RequestInquiry.ts
index 67eff6b5..bfb96eff 100644
--- a/src/react/Models/RequestInquiry.ts
+++ b/src/models/RequestInquiry.ts
@@ -7,8 +7,8 @@ import {
     PaymentAlias,
     RequestStatus,
     RequestSplitTheBill
-} from "../Types/Types";
-import Event, { EventTypeValue } from "../Types/Event";
+} from "~types/Types";
+import Event, { EventTypeValue } from "~types/Event";
 
 export default class RequestInquiry implements Event {
     // the original raw object
diff --git a/src/react/Models/RequestInquiryBatch.ts b/src/models/RequestInquiryBatch.ts
similarity index 96%
rename from src/react/Models/RequestInquiryBatch.ts
rename to src/models/RequestInquiryBatch.ts
index fbd7d39a..f7b2476f 100644
--- a/src/react/Models/RequestInquiryBatch.ts
+++ b/src/models/RequestInquiryBatch.ts
@@ -1,5 +1,5 @@
-import { Amount, RequestSplitTheBill } from "../Types/Types";
-import Event, { EventTypeValue } from "../Types/Event";
+import { Amount, RequestSplitTheBill } from "~types/Types";
+import Event, { EventTypeValue } from "~types/Event";
 import RequestInquiry from "./RequestInquiry";
 
 export default class RequestInquiryBatch implements Event {
diff --git a/src/react/Models/RequestResponse.ts b/src/models/RequestResponse.ts
similarity index 98%
rename from src/react/Models/RequestResponse.ts
rename to src/models/RequestResponse.ts
index c1c6ef4e..1a839de8 100644
--- a/src/react/Models/RequestResponse.ts
+++ b/src/models/RequestResponse.ts
@@ -8,8 +8,8 @@ import {
     RequestSplitTheBill,
     RequestResponseType,
     RequestResponseSubType
-} from "../Types/Types";
-import Event, { EventTypeValue } from "../Types/Event";
+} from "~types/Types";
+import Event, { EventTypeValue } from "~types/Event";
 
 export default class RequestResponse implements Event {
     // the original raw object
diff --git a/src/react/Models/SavingsGoal.ts b/src/models/SavingsGoal.ts
similarity index 97%
rename from src/react/Models/SavingsGoal.ts
rename to src/models/SavingsGoal.ts
index 4f423bfc..9f717061 100644
--- a/src/react/Models/SavingsGoal.ts
+++ b/src/models/SavingsGoal.ts
@@ -1,6 +1,6 @@
 import MonetaryAccount from "./MonetaryAccount";
-import { generateGUID } from "../Functions/Utils";
-import { calculateTotalBalance } from "../Components/SavingsGoals/Helpers.js";
+import { generateGUID } from "~functions/Utils";
+import { calculateTotalBalance } from "~components/SavingsGoals/Helpers";
 
 export type SavingsGoalSettings = {
     startAmount?: number;
diff --git a/src/react/Pages/AccountInfo.jsx b/src/pages/AccountInfo.tsx
similarity index 93%
rename from src/react/Pages/AccountInfo.jsx
rename to src/pages/AccountInfo.tsx
index 3fb0e36d..5912a568 100644
--- a/src/react/Pages/AccountInfo.jsx
+++ b/src/pages/AccountInfo.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { translate } from "react-i18next";
-import Redirect from "react-router-dom/Redirect";
+import { Redirect } from "react-router-dom";
 import { connect } from "react-redux";
 import Helmet from "react-helmet";
 import CirclePicker from "react-color/lib/Circle";
@@ -20,32 +20,31 @@ import DialogTitle from "@material-ui/core/DialogTitle";
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
-
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 
-import TranslateTypography from "../Components/TranslationHelpers/Typography";
-import LazyAttachmentImage from "../Components/AttachmentImage/LazyAttachmentImage";
-import NavLink from "../Components/Routing/NavLink";
-import CombinedList from "../Components/CombinedList/CombinedList";
-import AccountCard from "../Components/AccountCard";
-import TranslateButton from "../Components/TranslationHelpers/Button";
-import MoneyFormatInput from "../Components/FormFields/MoneyFormatInput";
-
-import { filterShareInviteMonetaryAccountResponses, filterShareInviteBankInquiries } from "../Functions/DataFilters";
-
-import { openSnackbar } from "../Actions/snackbar";
-import { accountsUpdate, accountsUpdateSettings, accountsDeactivate } from "../Actions/accounts";
-import { paymentInfoUpdate } from "../Actions/payments";
-import { requestResponsesUpdate } from "../Actions/request_responses";
-import { bunqMeTabsUpdate } from "../Actions/bunq_me_tabs";
-import { masterCardActionsUpdate } from "../Actions/master_card_actions";
-import { requestInquiriesUpdate } from "../Actions/request_inquiries";
-import { requestInquiryBatchesUpdate } from "../Actions/request_inquiry_batches";
-import { shareInviteMonetaryAccountInquiriesInfoUpdate } from "../Actions/share_invite_monetary_account_inquiries";
-import { shareInviteMonetaryAccountResponsesInfoUpdate } from "../Actions/share_invite_monetary_account_responses";
-import { shareInviteMonetaryAccountResponseChangeStatus } from "../Actions/share_invite_monetary_account_response";
-import { shareInviteMonetaryAccountInquiryChangeStatus } from "../Actions/share_invite_monetary_account_inquiry";
-import { connectGetPermissions } from "../Functions/ConnectGetPermissions";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import LazyAttachmentImage from "~components/AttachmentImage/LazyAttachmentImage";
+import NavLink from "~components/Routing/NavLink";
+import CombinedList from "~components/CombinedList/CombinedList";
+import AccountCard from "~components/AccountCard";
+import TranslateButton from "~components/TranslationHelpers/Button";
+import MoneyFormatInput from "~components/FormFields/MoneyFormatInput";
+
+import { filterShareInviteMonetaryAccountResponses, filterShareInviteBankInquiries } from "~functions/DataFilters";
+
+import { paymentInfoUpdate } from "~actions/payments";
+import { requestResponsesUpdate } from "~actions/request_responses";
+import { masterCardActionsUpdate } from "~actions/master_card_actions";
+import { requestInquiriesUpdate } from "~actions/request_inquiries";
+import { requestInquiryBatchesUpdate } from "~actions/request_inquiry_batches";
+import { shareInviteMonetaryAccountInquiriesInfoUpdate } from "~actions/share_invite_monetary_account_inquiries";
+import { shareInviteMonetaryAccountResponsesInfoUpdate } from "~actions/share_invite_monetary_account_responses";
+import { shareInviteMonetaryAccountResponseChangeStatus } from "~actions/share_invite_monetary_account_response";
+import { shareInviteMonetaryAccountInquiryChangeStatus } from "~actions/share_invite_monetary_account_inquiry";
+import { connectGetPermissions } from "~functions/ConnectGetPermissions";
+import { accountsDeactivate, accountsUpdate, accountsUpdateSettings } from "~store/accounts/thunks";
+import { bunqMeTabsUpdate } from "~store/bunqMeTabs/thunks";
+import { actions as snackbarActions } from "~store/snackbar";
 
 const styles = {
     paper: {
@@ -107,7 +106,9 @@ const PersonChip = ({ alias, BunqJSClient, ...otherProps }) => {
     );
 };
 
-class AccountInfo extends React.Component {
+class AccountInfo extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -416,7 +417,7 @@ class AccountInfo extends React.Component {
             };
 
             content = (
-                <React.Fragment>
+                <>
                     <Dialog key="deactivate-dialog" open={this.state.openDialog} onClose={this.toggleDeactivateDialog}>
                         <DialogTitle>{t("Cancel account")}</DialogTitle>
 
@@ -543,7 +544,7 @@ class AccountInfo extends React.Component {
                             displayAcceptedRequests={true}
                         />
                     </Paper>
-                </React.Fragment>
+                </>
             );
         } else {
             content = (
@@ -601,7 +602,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        openSnackbar: message => dispatch(openSnackbar(message)),
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
 
         accountsUpdate: userId => dispatch(accountsUpdate(BunqJSClient, userId)),
         deactivateAccount: (userId, accountId, reason, accountType) =>
diff --git a/src/react/Pages/AddAccount.jsx b/src/pages/AddAccount.tsx
similarity index 94%
rename from src/react/Pages/AddAccount.jsx
rename to src/pages/AddAccount.tsx
index 8d648392..fac0f10f 100644
--- a/src/react/Pages/AddAccount.jsx
+++ b/src/pages/AddAccount.tsx
@@ -15,14 +15,14 @@ import RadioGroup from "@material-ui/core/RadioGroup";
 
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 
-import { openSnackbar } from "../Actions/snackbar";
-import { createAccount } from "../Actions/accounts";
+import MoneyFormatInput from "~components/FormFields/MoneyFormatInput";
+import TranslateButton from "~components/TranslationHelpers/Button";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
 
-import MoneyFormatInput from "../Components/FormFields/MoneyFormatInput";
-import TranslateButton from "../Components/TranslationHelpers/Button";
-import TranslateTypography from "../Components/TranslationHelpers/Typography";
+import { createAccount } from "~store/accounts/thunks";
+import { actions as snackbarActions } from "~store/snackbar";
 
-const styles = {
+const styles: any = {
     bigAvatar: {
         width: 60,
         height: 60
@@ -46,7 +46,9 @@ const styles = {
     }
 };
 
-class AddAccount extends React.Component {
+class AddAccount extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -263,7 +265,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
             dispatch(
                 createAccount(BunqJSClient, userId, currency, description, dailyLimit, color, savingsGoal, accountType)
             ),
-        openSnackbar: message => dispatch(openSnackbar(message))
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
     };
 };
 
diff --git a/src/react/Pages/ApplicationInfo.jsx b/src/pages/ApplicationInfo.tsx
similarity index 91%
rename from src/react/Pages/ApplicationInfo.jsx
rename to src/pages/ApplicationInfo.tsx
index 1cbeb014..83a222bc 100644
--- a/src/react/Pages/ApplicationInfo.jsx
+++ b/src/pages/ApplicationInfo.tsx
@@ -18,16 +18,17 @@ const remote = require("electron").remote;
 const shell = require("electron").shell;
 const app = remote.app;
 
-import NavLink from "../Components/Routing/NavLink";
-import TranslateButton from "../Components/TranslationHelpers/Button";
-import TranslateTypography from "../Components/TranslationHelpers/Typography";
+import NavLink from "~components/Routing/NavLink";
+import TranslateButton from "~components/TranslationHelpers/Button";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
 
-import { openSnackbar } from "../Actions/snackbar";
-import { allReleases } from "../Functions/VersionChecker";
-import { humanReadableDate } from "../Functions/Utils";
-import Logger from "../Functions/Logger";
+import { allReleases } from "~functions/VersionChecker";
+import { humanReadableDate } from "~functions/Utils";
+import Logger from "~functions/Logger";
 
-const styles = {
+import { actions as snackbarActions } from "~store/snackbar";
+
+const styles: any = {
     avatar: {
         width: 55,
         height: 55
@@ -37,7 +38,9 @@ const styles = {
     }
 };
 
-class ApplicationInfo extends React.Component {
+class ApplicationInfo extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -169,7 +172,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        openSnackbar: message => dispatch(openSnackbar(message))
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
     };
 };
 
diff --git a/src/react/Pages/BunqMePersonal/BunqMePersonal.jsx b/src/pages/BunqMePersonal/BunqMePersonal.tsx
similarity index 98%
rename from src/react/Pages/BunqMePersonal/BunqMePersonal.jsx
rename to src/pages/BunqMePersonal/BunqMePersonal.tsx
index 6d544344..0fd3f1f0 100644
--- a/src/react/Pages/BunqMePersonal/BunqMePersonal.jsx
+++ b/src/pages/BunqMePersonal/BunqMePersonal.tsx
@@ -10,12 +10,11 @@ import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
-
 import UrlIcon from "@material-ui/icons/Link";
 
 import LinkPreviewField from "./LinkPreviewField";
-import QRCode from "../../Components/QR/QRCode";
-import MoneyFormatInput from "../../Components/FormFields/MoneyFormatInput";
+import QRCode from "~components/QR/QRCode";
+import MoneyFormatInput from "~components/FormFields/MoneyFormatInput";
 
 const styles = {
     headerTypography: {
diff --git a/src/react/Pages/BunqMePersonal/LinkPreviewField.jsx b/src/pages/BunqMePersonal/LinkPreviewField.tsx
similarity index 95%
rename from src/react/Pages/BunqMePersonal/LinkPreviewField.jsx
rename to src/pages/BunqMePersonal/LinkPreviewField.tsx
index 5a54b981..97cc25ad 100644
--- a/src/react/Pages/BunqMePersonal/LinkPreviewField.jsx
+++ b/src/pages/BunqMePersonal/LinkPreviewField.tsx
@@ -5,10 +5,10 @@ import Paper from "@material-ui/core/Paper";
 import InputBase from "@material-ui/core/InputBase";
 import Divider from "@material-ui/core/Divider";
 import IconButton from "@material-ui/core/IconButton";
-
 import ClearIcon from "@material-ui/icons/Clear";
 import CopyIcon from "@material-ui/icons/FileCopy";
-import CopyToClipboardWrap from "../../Components/CopyToClipboardWrap";
+
+import CopyToClipboardWrap from "~components/CopyToClipboardWrap";
 
 const styles = {
     root: {
diff --git a/src/react/Pages/BunqMeTab/BunqMeTab.jsx b/src/pages/BunqMeTab/BunqMeTab.tsx
similarity index 93%
rename from src/react/Pages/BunqMeTab/BunqMeTab.jsx
rename to src/pages/BunqMeTab/BunqMeTab.tsx
index 9da44ef0..a895bbc8 100644
--- a/src/react/Pages/BunqMeTab/BunqMeTab.jsx
+++ b/src/pages/BunqMeTab/BunqMeTab.tsx
@@ -10,19 +10,20 @@ import IconButton from "@material-ui/core/IconButton";
 import CloseIcon from "@material-ui/icons/Close";
 import AddIcon from "@material-ui/icons/Add";
 
-import AccountList from "../../Components/AccountList/AccountList";
-import BunqMeTabList from "../../Components/BunqMeTabList";
+import AccountList from "~components/AccountList/AccountList";
+import BunqMeTabList from "~components/BunqMeTabList";
+import { bunqMeTabsUpdate } from "~store/bunqMeTabs/thunks";
 import BunqMeTabForm from "./BunqMeTabForm";
 
-import { bunqMeTabsUpdate } from "../../Actions/bunq_me_tabs";
-
 const styles = {
     paper: {
         marginBottom: 20
     }
 };
 
-class BunqMeTab extends React.Component {
+class BunqMeTab extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
diff --git a/src/react/Pages/BunqMeTab/BunqMeTabForm.jsx b/src/pages/BunqMeTab/BunqMeTabForm.tsx
similarity index 91%
rename from src/react/Pages/BunqMeTab/BunqMeTabForm.jsx
rename to src/pages/BunqMeTab/BunqMeTabForm.tsx
index 9976c0fd..3d946627 100644
--- a/src/react/Pages/BunqMeTab/BunqMeTabForm.jsx
+++ b/src/pages/BunqMeTab/BunqMeTabForm.tsx
@@ -5,16 +5,18 @@ import { connect } from "react-redux";
 import TextField from "@material-ui/core/TextField";
 import FormControl from "@material-ui/core/FormControl";
 
-import AccountSelectorDialog from "../../Components/FormFields/AccountSelectorDialog";
-import MoneyFormatInput from "../../Components/FormFields/MoneyFormatInput";
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
+import AccountSelectorDialog from "~components/FormFields/AccountSelectorDialog";
+import MoneyFormatInput from "~components/FormFields/MoneyFormatInput";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import TranslateButton from "~components/TranslationHelpers/Button";
+import { bunqMeTabSend } from "~store/bunqMeTab/thunks";
+
+import { actions as snackbarActions } from "~store/snackbar";
+import { actions as bunqMeTabsActions } from "~store/bunqMeTabs";
 
-import { openSnackbar } from "../../Actions/snackbar";
-import { bunqMeTabSend } from "../../Actions/bunq_me_tab";
 import ConfirmationDialog from "./ConfirmationDialog";
 
-const styles = {
+const styles: any = {
     payButton: {
         width: "100%"
     },
@@ -27,7 +29,9 @@ const styles = {
     }
 };
 
-class BunqMeTabForm extends React.Component {
+class BunqMeTabForm extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -227,7 +231,7 @@ const mapDispatchToProps = (dispatch, props) => {
     return {
         bunqMeTabSend: (userId, accountId, description, amount, options) =>
             dispatch(bunqMeTabSend(BunqJSClient, userId, accountId, description, amount, options)),
-        openSnackbar: message => dispatch(openSnackbar(message))
+        openSnackbar: message => dispatch(snackbarActions.open({ message }))
     };
 };
 
diff --git a/src/react/Pages/BunqMeTab/ConfirmationDialog.jsx b/src/pages/BunqMeTab/ConfirmationDialog.tsx
similarity index 93%
rename from src/react/Pages/BunqMeTab/ConfirmationDialog.jsx
rename to src/pages/BunqMeTab/ConfirmationDialog.tsx
index fa1a5f58..8b139362 100644
--- a/src/react/Pages/BunqMeTab/ConfirmationDialog.jsx
+++ b/src/pages/BunqMeTab/ConfirmationDialog.tsx
@@ -8,9 +8,9 @@ import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import Dialog from "@material-ui/core/Dialog";
 
-import { formatMoney } from "../../Functions/Utils";
+import { formatMoney } from "~functions/Utils";
 
-import TranslateButton from "../../Components/TranslationHelpers/Button";
+import TranslateButton from "~components/TranslationHelpers/Button";
 
 class ConfirmationDialog extends React.Component {
     render() {
diff --git a/src/react/Pages/Cards/CardListItem.jsx b/src/pages/Cards/CardListItem.tsx
similarity index 94%
rename from src/react/Pages/Cards/CardListItem.jsx
rename to src/pages/Cards/CardListItem.tsx
index bbfcf35a..88584ef9 100644
--- a/src/react/Pages/Cards/CardListItem.jsx
+++ b/src/pages/Cards/CardListItem.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Card from "~models/Card";
 
 const styles = {
     cardWrapper: {},
@@ -47,7 +48,7 @@ export const getCardTypeImage = (type, apiType = "CardDebit") => {
     return { cardImage, cardType };
 };
 
-class CardListItem extends React.Component {
+class CardListItem extends React.Component<{ card: Card; onClick: any }> {
     constructor(props, context) {
         super(props, context);
         this.state = {};
diff --git a/src/react/Pages/Cards/Cards.jsx b/src/pages/Cards/Cards.tsx
similarity index 96%
rename from src/react/Pages/Cards/Cards.jsx
rename to src/pages/Cards/Cards.tsx
index a3986587..06f10d15 100644
--- a/src/react/Pages/Cards/Cards.jsx
+++ b/src/pages/Cards/Cards.tsx
@@ -20,12 +20,13 @@ import DeleteIcon from "@material-ui/icons/Delete";
 import CardListItem from "./CardListItem";
 import CvcCodeListItem from "./CvcCodeListItem";
 import VirtualAccountNumbersDialog from "./VirtualAccountNumbersDialog";
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
-import AccountSelectorDialog from "../../Components/FormFields/AccountSelectorDialog";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import AccountSelectorDialog from "~components/FormFields/AccountSelectorDialog";
 
-import { getCardDescription } from "../../Functions/Utils";
-import { cardStatus, cardOrderStatus } from "../../Functions/EventStatusTexts";
-import { cardsUpdate, cardsSetCardOrder, cardsAssignAccounts } from "../../Actions/cards";
+import { getCardDescription } from "~functions/Utils";
+import { cardStatus, cardOrderStatus } from "~functions/EventStatusTexts";
+import { cardsUpdate, cardsAssignAccounts } from "~store/cards/thunks";
+import { actions as cardsActions } from "~store/cards";
 
 const styles = {
     gridContainer: {
@@ -50,7 +51,9 @@ const styles = {
     }
 };
 
-class Cards extends React.Component {
+class Cards extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -310,7 +313,7 @@ class Cards extends React.Component {
                 : "";
 
         const secondaryAssignmentSelection = secondaryAccountIndex !== "" && (
-            <React.Fragment>
+            <>
                 <Divider />
                 <ListSubheader style={styles.assignmentSubHeader}>
                     {t("Secondary account")}
@@ -328,11 +331,11 @@ class Cards extends React.Component {
                     BunqJSClient={this.props.BunqJSClient}
                     hiddenConnectTypes={["draftOnly", "showOnly"]}
                 />
-            </React.Fragment>
+            </>
         );
 
         const lastDigitsComponent = cardInfo.primary_account_number_four_digit && (
-            <React.Fragment>
+            <>
                 <Divider />
                 <ListItem>
                     <ListItemText
@@ -340,15 +343,15 @@ class Cards extends React.Component {
                         primary={`---- ---- ---- ${cardInfo.primary_account_number_four_digit}`}
                     />
                 </ListItem>
-            </React.Fragment>
+            </>
         );
         const countryComponent = cardInfo.country && (
-            <React.Fragment>
+            <>
                 <Divider />
                 <ListItem>
                     <ListItemText secondary={t("Country")} primary={cardInfo.country} />
                 </ListItem>
-            </React.Fragment>
+            </>
         );
 
         return (
@@ -450,7 +453,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = dispatch => {
     return {
         cardsUpdate: userId => dispatch(cardsUpdate(userId)),
-        cardsSetCardOrder: cardOrder => dispatch(cardsSetCardOrder(cardOrder)),
+        cardsSetCardOrder: cardOrder => dispatch(cardsActions.setOrder(cardOrder)),
 
         cardsAssignAccounts: (user_id, card_id, assignment) =>
             dispatch(cardsAssignAccounts(user_id, card_id, assignment))
diff --git a/src/react/Pages/Cards/CvcCodeListItem.jsx b/src/pages/Cards/CvcCodeListItem.tsx
similarity index 93%
rename from src/react/Pages/Cards/CvcCodeListItem.jsx
rename to src/pages/Cards/CvcCodeListItem.tsx
index 960bdae8..a5923da1 100644
--- a/src/react/Pages/Cards/CvcCodeListItem.jsx
+++ b/src/pages/Cards/CvcCodeListItem.tsx
@@ -9,9 +9,11 @@ import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import RefreshIcon from "@material-ui/icons/Refresh";
 import VisibilityIcon from "@material-ui/icons/Visibility";
 
-import { cardGenerateCvc2, cardUpdateCvc2Codes } from "../../Actions/card_cvc2";
+import { cardGenerateCvc2, cardUpdateCvc2Codes } from "~store/cardCvc2/thunks";
+
+class CvcCodeListItem extends React.Component<any> {
+    state: any;
 
-class CvcCodeListItem extends React.Component {
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -46,7 +48,7 @@ class CvcCodeListItem extends React.Component {
         }
 
         return (
-            <React.Fragment>
+            <>
                 <Divider />
                 <ListItem>
                     <ListItemText secondary={t("CVC Code")} primary={cvcCode} />
@@ -60,7 +62,7 @@ class CvcCodeListItem extends React.Component {
                         </IconButton>
                     </ListItemSecondaryAction>
                 </ListItem>
-            </React.Fragment>
+            </>
         );
     }
 }
diff --git a/src/react/Pages/Cards/VirtualAccountNumbersDialog.jsx b/src/pages/Cards/VirtualAccountNumbersDialog.tsx
similarity index 92%
rename from src/react/Pages/Cards/VirtualAccountNumbersDialog.jsx
rename to src/pages/Cards/VirtualAccountNumbersDialog.tsx
index 3218324a..9493c013 100644
--- a/src/react/Pages/Cards/VirtualAccountNumbersDialog.jsx
+++ b/src/pages/Cards/VirtualAccountNumbersDialog.tsx
@@ -8,7 +8,7 @@ import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 
-import AccountListItem from "../../Components/AccountList/AccountListItem";
+import AccountListItem from "~components/AccountList/AccountListItem";
 
 const styles = {
     list: {
@@ -41,7 +41,7 @@ class VirtualAccountNumbersDialog extends React.Component {
                     });
 
                     return (
-                        <React.Fragment>
+                        <>
                             <ListItem>
                                 <ListItemText
                                     primary={virtualNumber.description}
@@ -49,7 +49,7 @@ class VirtualAccountNumbersDialog extends React.Component {
                                 />
                             </ListItem>
                             {accountInfo && <AccountListItem clickable={false} account={accountInfo} />}
-                        </React.Fragment>
+                        </>
                     );
                 })
         ) : (
@@ -59,7 +59,7 @@ class VirtualAccountNumbersDialog extends React.Component {
         );
 
         return (
-            <React.Fragment>
+            <>
                 <Divider />
                 <ListItem button onClick={this.onOpen}>
                     <ListItemText primary={t("View virtual cards")} />
@@ -68,7 +68,7 @@ class VirtualAccountNumbersDialog extends React.Component {
                 <Dialog onClose={this.onClose} open={this.state.open}>
                     <List style={styles.list}>{virtualCardComponents}</List>
                 </Dialog>
-            </React.Fragment>
+            </>
         );
     }
 }
diff --git a/src/react/Pages/CategoryDashboard/CategoryDashboard.jsx b/src/pages/CategoryDashboard/CategoryDashboard.tsx
similarity index 88%
rename from src/react/Pages/CategoryDashboard/CategoryDashboard.jsx
rename to src/pages/CategoryDashboard/CategoryDashboard.tsx
index cb059734..827a6c26 100644
--- a/src/react/Pages/CategoryDashboard/CategoryDashboard.jsx
+++ b/src/pages/CategoryDashboard/CategoryDashboard.tsx
@@ -6,17 +6,17 @@ import { translate } from "react-i18next";
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
 
-import CategoryEditor from "../../Components/Categories/CategoryEditor";
-import CategoryChip from "../../Components/Categories/CategoryChip";
-import ImportDialog from "../../Components/ImportDialog";
-import ExportDialog from "../../Components/ExportDialog";
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
+import CategoryEditor from "~components/Categories/CategoryEditor";
+import CategoryChip from "~components/Categories/CategoryChip";
+import ImportDialog from "~components/ImportDialog";
+import ExportDialog from "~components/ExportDialog";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import TranslateButton from "~components/TranslationHelpers/Button";
 
-import { removeCategory, removeCategoryConnection, setCategory } from "../../Actions/categories";
-import { openSnackbar } from "../../Actions/snackbar";
+import { actions as categoriesActions } from "~store/categories";
+import { actions as snackbarActions } from "~store/snackbar";
 
-const styles = {
+const styles: any = {
     chipWrapper: {
         display: "flex",
         justifyContent: "center",
@@ -28,7 +28,9 @@ const styles = {
     }
 };
 
-class CategoryDashboard extends React.Component {
+class CategoryDashboard extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -227,10 +229,10 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        openSnackbar: message => dispatch(openSnackbar(message)),
-        removeCategory: (...params) => dispatch(removeCategory(...params)),
-        removeCategoryConnection: (...params) => dispatch(removeCategoryConnection(...params)),
-        setCategory: (...params) => dispatch(setCategory(...params))
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
+        removeCategory: (...params) => dispatch(categoriesActions.removeCategory(...params)),
+        removeCategoryConnection: (...params) => dispatch(categoriesActions.removeCategoryConnection(...params)),
+        setCategory: (...params) => dispatch(categoriesActions.setCategory(...params))
     };
 };
 
diff --git a/src/react/Pages/Connect/BudgetFields.jsx b/src/pages/Connect/BudgetFields.tsx
similarity index 92%
rename from src/react/Pages/Connect/BudgetFields.jsx
rename to src/pages/Connect/BudgetFields.tsx
index e9eec22f..3f919c7d 100644
--- a/src/react/Pages/Connect/BudgetFields.jsx
+++ b/src/pages/Connect/BudgetFields.tsx
@@ -7,8 +7,8 @@ import Switch from "@material-ui/core/Switch";
 import FormControl from "@material-ui/core/FormControl";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 
-import MoneyFormatInput from "../../Components/FormFields/MoneyFormatInput";
-import TranslateMenuItem from "../../Components/TranslationHelpers/MenuItem";
+import MoneyFormatInput from "~components/FormFields/MoneyFormatInput";
+import TranslateMenuItem from "~components/TranslationHelpers/MenuItem";
 
 const styles = {
     formControl: {
@@ -38,7 +38,7 @@ export default props => {
                 </Grid>
 
                 {props.setBudget ? (
-                    <React.Fragment>
+                    <>
                         <Grid item xs={12} sm={8}>
                             <FormControl style={styles.formControl}>
                                 <Select
@@ -63,7 +63,7 @@ export default props => {
                                 />
                             </FormControl>
                         </Grid>
-                    </React.Fragment>
+                    </>
                 ) : null}
             </Grid>
         </Grid>
diff --git a/src/react/Pages/Connect/Connect.jsx b/src/pages/Connect/Connect.tsx
similarity index 94%
rename from src/react/Pages/Connect/Connect.jsx
rename to src/pages/Connect/Connect.tsx
index 3c6040f0..ebe44f7e 100644
--- a/src/react/Pages/Connect/Connect.jsx
+++ b/src/pages/Connect/Connect.tsx
@@ -14,30 +14,30 @@ import List from "@material-ui/core/List";
 import ListSubheader from "@material-ui/core/ListSubheader";
 
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import { accountsUpdate } from "~store/accounts/thunks";
 
 import BudgetFields from "./BudgetFields";
 import TimeLimitFields from "./TimeLimitFields";
 import ConnectListItem from "./ConnectListItem";
 import ConnectSettingItem from "./ConnectSettingItem";
-import AccountListItem from "../../Components/AccountList/AccountListItem";
-import TargetSelection from "../../Components/FormFields/TargetSelection";
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
-import FullAccess from "../../Components/ListItems/ShareInviteBankTypes/FullAccess";
-import DraftAccess from "../../Components/ListItems/ShareInviteBankTypes/DraftAccess";
-import ShowOnly from "../../Components/ListItems/ShareInviteBankTypes/ShowOnly";
-
-import { filterShareInviteBankInquiries, filterShareInviteMonetaryAccountResponses } from "../../Functions/DataFilters";
-import { getInternationalFormat, isValidPhonenumber } from "../../Functions/PhoneLib";
-import { getUTCDate } from "../../Functions/Utils";
-
-import { shareInviteMonetaryAccountResponsesInfoUpdate } from "../../Actions/share_invite_monetary_account_responses";
-import { shareInviteMonetaryAccountInquiriesInfoUpdate } from "../../Actions/share_invite_monetary_account_inquiries";
-import { shareInviteMonetaryAccountInquirySend } from "../../Actions/share_invite_monetary_account_inquiry";
-import { accountsUpdate } from "../../Actions/accounts";
-import { openSnackbar } from "../../Actions/snackbar";
-
-const styles = {
+import AccountListItem from "~components/AccountList/AccountListItem";
+import TargetSelection from "~components/FormFields/TargetSelection";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import TranslateButton from "~components/TranslationHelpers/Button";
+import FullAccess from "~components/ListItems/ShareInviteBankTypes/FullAccess";
+import DraftAccess from "~components/ListItems/ShareInviteBankTypes/DraftAccess";
+import ShowOnly from "~components/ListItems/ShareInviteBankTypes/ShowOnly";
+
+import { filterShareInviteBankInquiries, filterShareInviteMonetaryAccountResponses } from "~functions/DataFilters";
+import { getInternationalFormat, isValidPhonenumber } from "~functions/PhoneLib";
+import { getUTCDate } from "~functions/Utils";
+
+import { shareInviteMonetaryAccountResponsesInfoUpdate } from "~actions/share_invite_monetary_account_responses";
+import { shareInviteMonetaryAccountInquiriesInfoUpdate } from "~actions/share_invite_monetary_account_inquiries";
+import { shareInviteMonetaryAccountInquirySend } from "~actions/share_invite_monetary_account_inquiry";
+import { actions as snackbarActions } from "~store/snackbar";
+
+const styles: any = {
     bigAvatar: {
         width: 60,
         height: 60
@@ -57,7 +57,9 @@ const styles = {
     }
 };
 
-class Connect extends React.Component {
+class Connect extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -236,7 +238,7 @@ class Connect extends React.Component {
     };
 
     // callbacks for input fields and selectors
-    setTargetType = type => event => {
+    setTargetType = type => () => {
         this.setState({
             targetType: type,
             target: ""
@@ -267,7 +269,7 @@ class Connect extends React.Component {
         });
     };
 
-    sendConnectRequest = event => {
+    sendConnectRequest = () => {
         if (!this.props.shareInviteMonetaryAccountInquiryLoading) {
             let shareDetail;
             let shareOptions;
@@ -627,7 +629,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        openSnackbar: message => dispatch(openSnackbar(message)),
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
 
         accountsUpdate: userId => dispatch(accountsUpdate(BunqJSClient, userId)),
 
diff --git a/src/react/Pages/Connect/ConnectListItem.jsx b/src/pages/Connect/ConnectListItem.tsx
similarity index 95%
rename from src/react/Pages/Connect/ConnectListItem.jsx
rename to src/pages/Connect/ConnectListItem.tsx
index a8d46857..30f48a75 100644
--- a/src/react/Pages/Connect/ConnectListItem.jsx
+++ b/src/pages/Connect/ConnectListItem.tsx
@@ -6,12 +6,12 @@ import Avatar from "@material-ui/core/Avatar";
 import Collapse from "@material-ui/core/Collapse";
 import Button from "@material-ui/core/Button";
 
-import LazyAttachmentImage from "../../Components/AttachmentImage/LazyAttachmentImage";
+import LazyAttachmentImage from "~components/AttachmentImage/LazyAttachmentImage";
 
-import { formatMoney } from "../../Functions/Utils";
+import { formatMoney } from "~functions/Utils";
 
-import { shareInviteMonetaryAccountInquiryChangeStatus } from "../../Actions/share_invite_monetary_account_inquiry";
-import { shareInviteMonetaryAccountResponseChangeStatus } from "../../Actions/share_invite_monetary_account_response";
+import { shareInviteMonetaryAccountInquiryChangeStatus } from "~actions/share_invite_monetary_account_inquiry";
+import { shareInviteMonetaryAccountResponseChangeStatus } from "~actions/share_invite_monetary_account_response";
 
 const styles = {
     smallAvatar: {
@@ -175,7 +175,7 @@ class ConnectListItem extends React.Component {
         }
 
         return (
-            <React.Fragment>
+            <>
                 <ListItem button onClick={this.toggleOpen}>
                     <Avatar style={styles.smallAvatar}>
                         <LazyAttachmentImage height={50} BunqJSClient={BunqJSClient} imageUUID={imageUUID} />
@@ -186,7 +186,7 @@ class ConnectListItem extends React.Component {
                     />
                 </ListItem>
                 {detailItem}
-            </React.Fragment>
+            </>
         );
     }
 }
diff --git a/src/react/Pages/Connect/ConnectSettingItem.jsx b/src/pages/Connect/ConnectSettingItem.tsx
similarity index 100%
rename from src/react/Pages/Connect/ConnectSettingItem.jsx
rename to src/pages/Connect/ConnectSettingItem.tsx
diff --git a/src/react/Pages/Connect/TimeLimitFields.jsx b/src/pages/Connect/TimeLimitFields.tsx
similarity index 100%
rename from src/react/Pages/Connect/TimeLimitFields.jsx
rename to src/pages/Connect/TimeLimitFields.tsx
diff --git a/src/react/Pages/Contacts/ContactHeader.jsx b/src/pages/Contacts/ContactHeader.tsx
similarity index 96%
rename from src/react/Pages/Contacts/ContactHeader.jsx
rename to src/pages/Contacts/ContactHeader.tsx
index 603987e4..e9d4b67d 100644
--- a/src/react/Pages/Contacts/ContactHeader.jsx
+++ b/src/pages/Contacts/ContactHeader.tsx
@@ -8,8 +8,8 @@ import IconButton from "@material-ui/core/IconButton";
 
 import HelpIcon from "@material-ui/icons/Help";
 
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import TranslateButton from "~components/TranslationHelpers/Button";
 
 const styles = {
     title: {
diff --git a/src/react/Pages/Contacts/Contacts.jsx b/src/pages/Contacts/Contacts.tsx
similarity index 92%
rename from src/react/Pages/Contacts/Contacts.jsx
rename to src/pages/Contacts/Contacts.tsx
index 55f43192..2af2e044 100644
--- a/src/react/Pages/Contacts/Contacts.jsx
+++ b/src/pages/Contacts/Contacts.tsx
@@ -9,8 +9,8 @@ import Button from "@material-ui/core/Button";
 
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import TranslateButton from "~components/TranslationHelpers/Button";
 import ContactHeader from "./ContactHeader";
 
 const remote = require("electron").remote;
@@ -19,11 +19,11 @@ import {
     contactInfoUpdateGoogle,
     contactInfoUpdateApple,
     contactInfoUpdateOffice365,
-    contactsClear,
-    contactsSetInfoType
-} from "../../Actions/contacts";
-import { openSnackbar } from "../../Actions/snackbar";
-const styles = {
+} from "~store/contacts/thunks";
+import { actions as snackbarActions } from "~store/snackbar";
+import { actions as contactsActions } from "~store/contacts";
+
+const styles: any = {
     row: {
         marginBottom: 8
     },
@@ -39,7 +39,9 @@ const styles = {
     }
 };
 
-class Contacts extends React.Component {
+class Contacts extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -203,9 +205,9 @@ const mapDispatchToProps = (dispatch, props) => {
         contactInfoUpdateGoogle: accessToken => dispatch(contactInfoUpdateGoogle(BunqJSClient, accessToken)),
         contactInfoUpdateApple: filePaths => dispatch(contactInfoUpdateApple(BunqJSClient, filePaths)),
         contactInfoUpdateOffice365: accessToken => dispatch(contactInfoUpdateOffice365(BunqJSClient, accessToken)),
-        contactsSetInfoType: (contacts, type) => dispatch(contactsSetInfoType(contacts, type)),
-        clearContacts: (type = false) => dispatch(contactsClear(BunqJSClient, type)),
-        openSnackbar: message => dispatch(openSnackbar(message))
+        contactsSetInfoType: (contacts, type) => dispatch(contactsActions.setInfoType({ contacts, type })),
+        clearContacts: (type = false) => dispatch(contactsActions.clear({ BunqJSClient, type })),
+        openSnackbar: message => dispatch(snackbarActions.open({ message }))
     };
 };
 export default connect(mapStateToProps, mapDispatchToProps)(translate("translations")(Contacts));
diff --git a/src/react/Pages/Dashboard/AddMoneyButton.jsx b/src/pages/Dashboard/AddMoneyButton.tsx
similarity index 97%
rename from src/react/Pages/Dashboard/AddMoneyButton.jsx
rename to src/pages/Dashboard/AddMoneyButton.tsx
index 97bbd91f..37224d4c 100644
--- a/src/react/Pages/Dashboard/AddMoneyButton.jsx
+++ b/src/pages/Dashboard/AddMoneyButton.tsx
@@ -6,7 +6,7 @@ import Typography from "@material-ui/core/Typography";
 
 import MoneyIcon from "@material-ui/icons/AttachMoney";
 
-import { requestInquirySend } from "../../Actions/request_inquiry";
+import { requestInquirySend } from "~actions/request_inquiry";
 
 class AddMoneyButton extends React.Component {
     constructor(props, context) {
diff --git a/src/react/Pages/Dashboard/Dashboard.jsx b/src/pages/Dashboard/Dashboard.tsx
similarity index 94%
rename from src/react/Pages/Dashboard/Dashboard.jsx
rename to src/pages/Dashboard/Dashboard.tsx
index a823b658..2ac1741c 100644
--- a/src/react/Pages/Dashboard/Dashboard.jsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -16,16 +16,16 @@ import Tab from "@material-ui/core/Tab";
 
 import ExitToAppIcon from "@material-ui/icons/ExitToApp";
 
-import TranslateButton from "../../Components/TranslationHelpers/Button";
-import CombinedList from "../../Components/CombinedList/CombinedList";
-import AccountList from "../../Components/AccountList/AccountList";
-import NavLink from "../../Components/Routing/NavLink";
-import AttachmentImage from "../../Components/AttachmentImage/AttachmentImage";
-import SavingsGoalsList from "../../Components/SavingsGoals/SavingsGoalsList";
-import SwitchKeysMenu from "../../Components/SwitchKeysMenu";
+import TranslateButton from "~components/TranslationHelpers/Button";
+import CombinedList from "~components/CombinedList/CombinedList";
+import AccountList from "~components/AccountList/AccountList";
+import NavLink from "~components/Routing/NavLink";
+import AttachmentImage from "~components/AttachmentImage/AttachmentImage";
+import SavingsGoalsList from "~components/SavingsGoals/SavingsGoalsList";
+import SwitchKeysMenu from "~components/SwitchKeysMenu";
 import AddMoneyButton from "./AddMoneyButton";
 
-import { registrationLogOut } from "../../Actions/registration";
+import { registrationLogOut } from "~actions/registration";
 
 const styles = {
     btn: {
diff --git a/src/react/Pages/DebugPage.jsx b/src/pages/DebugPage.tsx
similarity index 96%
rename from src/react/Pages/DebugPage.jsx
rename to src/pages/DebugPage.tsx
index 5d6dbf2e..d2993b16 100644
--- a/src/react/Pages/DebugPage.jsx
+++ b/src/pages/DebugPage.tsx
@@ -5,7 +5,7 @@ import ReactJson from "react-json-view";
 import Grid from "@material-ui/core/Grid";
 import Button from "@material-ui/core/Button";
 
-import ReactJsonWrapper from "../Components/ReactJsonWrapper";
+import ReactJsonWrapper from "~components/ReactJsonWrapper";
 
 const styles = {
     paper: {
diff --git a/src/react/Pages/Disclaimer.jsx b/src/pages/Disclaimer.tsx
similarity index 96%
rename from src/react/Pages/Disclaimer.jsx
rename to src/pages/Disclaimer.tsx
index c769edd4..90427ea2 100644
--- a/src/react/Pages/Disclaimer.jsx
+++ b/src/pages/Disclaimer.tsx
@@ -16,10 +16,10 @@ import DesktopIcon from "@material-ui/icons/DesktopMac";
 import BuildIcon from "@material-ui/icons/Edit";
 import LiveHelpIcon from "@material-ui/icons/LiveHelp";
 
-import TranslateButton from "../Components/TranslationHelpers/Button";
+import TranslateButton from "~components/TranslationHelpers/Button";
 
-import Analytics from "../Functions/Analytics";
-import { setAnalyticsEnabled } from "../Actions/options";
+import Analytics from "~functions/Analytics";
+import { setAnalyticsEnabled } from "~actions/options";
 
 const styles = {
     wrapperContainer: {
diff --git a/src/react/Pages/Exports.jsx b/src/pages/Exports.tsx
similarity index 95%
rename from src/react/Pages/Exports.jsx
rename to src/pages/Exports.tsx
index 90f61a58..d038b87c 100644
--- a/src/react/Pages/Exports.jsx
+++ b/src/pages/Exports.tsx
@@ -1,10 +1,10 @@
 import React from "react";
 import { translate } from "react-i18next";
 import subMonths from "date-fns/subMonths";
-import format from "date-fns/format/index.js";
+import format from "date-fns/format";
 import { connect } from "react-redux";
 import Helmet from "react-helmet";
-import DatePicker from "material-ui-pickers/DatePicker/index.js";
+import DatePicker from "material-ui-pickers/DatePicker";
 import Grid from "@material-ui/core/Grid";
 import Avatar from "@material-ui/core/Avatar";
 import AppBar from "@material-ui/core/AppBar";
@@ -32,23 +32,23 @@ import RefreshIcon from "@material-ui/icons/Refresh";
 import { shell } from "electron";
 const remote = require("electron").remote;
 const app = remote ? remote.app : {};
-import fs from "../ImportWrappers/fs";
-import path from "../ImportWrappers/path";
+import fs from "~importwrappers/fs";
+import path from "~importwrappers/path";
 
-import AccountList from "../Components/AccountList/AccountList";
-import TranslateTypography from "../Components/TranslationHelpers/Typography";
-import TranslateButton from "../Components/TranslationHelpers/Button";
-import CombinedList from "../Components/CombinedList/CombinedList";
+import AccountList from "~components/AccountList/AccountList";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import TranslateButton from "~components/TranslationHelpers/Button";
+import CombinedList from "~components/CombinedList/CombinedList";
 
-import Logger from "../Functions/Logger";
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import { humanReadableDate, formatIban } from "../Functions/Utils";
-import CategoryHelper from "../Components/Categories/CategoryHelper";
+import Logger from "~functions/Logger";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import { humanReadableDate, formatIban } from "~functions/Utils";
+import CategoryHelper from "~components/Categories/CategoryHelper";
 
-import { openSnackbar } from "../Actions/snackbar";
-import { exportNew } from "../Actions/export_new";
-import { exportInfoUpdate } from "../Actions/exports";
-import { paymentFilter, masterCardActionFilter } from "../Functions/DataFilters";
+import { paymentFilter, masterCardActionFilter } from "~functions/DataFilters";
+import { exportNew } from "~store/exportNew/thunks";
+import { exportInfoUpdate } from "~store/exports/thunks";
+import { actions as snackbarActions } from "~store/snackbar";
 
 const escapeCsv = val => `"${val.replace('"', '"""')}"`;
 
@@ -71,7 +71,9 @@ const styles = {
     }
 };
 
-class Exports extends React.Component {
+class Exports extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -265,7 +267,8 @@ class Exports extends React.Component {
                 })
                 .catch(error => {
                     this.setState({ exportContentLoading: false });
-                    BunqErrorHandler(dispatch, error, failedMessage);
+                    // FIXME
+                    // BunqErrorHandler(dispatch, error, failedMessage);
                 });
         }
     };
@@ -402,7 +405,7 @@ class Exports extends React.Component {
                     </AppBar>
 
                     {this.state.selectedTab === 0 ? (
-                        <React.Fragment>
+                        <>
                             <Paper style={styles.paper}>
                                 <Grid container spacing={16}>
                                     <Grid item xs={12}>
@@ -537,11 +540,11 @@ class Exports extends React.Component {
                                     </Grid>
                                 </Grid>
                             </Paper>
-                        </React.Fragment>
+                        </>
                     ) : null}
 
                     {this.state.selectedTab === 1 ? (
-                        <React.Fragment>
+                        <>
                             <Paper style={styles.paper}>
                                 <Grid container spacing={16}>
                                     <Grid item xs={12}>
@@ -578,7 +581,7 @@ class Exports extends React.Component {
                                     ]}
                                 />
                             </Paper>
-                        </React.Fragment>
+                        </>
                     ) : null}
                 </Grid>
             </Grid>
@@ -617,7 +620,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        openSnackbar: message => dispatch(openSnackbar(message)),
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
         exportInfoUpdate: (userId, accountId) => dispatch(exportInfoUpdate(BunqJSClient, userId, accountId)),
         exportNew: (...params) => dispatch(exportNew(BunqJSClient, ...params))
     };
diff --git a/src/react/Pages/Login/Login.jsx b/src/pages/Login/Login.tsx
similarity index 98%
rename from src/react/Pages/Login/Login.jsx
rename to src/pages/Login/Login.tsx
index 492ea569..d5c99a99 100644
--- a/src/react/Pages/Login/Login.jsx
+++ b/src/pages/Login/Login.tsx
@@ -21,15 +21,15 @@ import InputLabel from "@material-ui/core/InputLabel";
 import BuildIcon from "@material-ui/icons/Build";
 import KeyIcon from "@material-ui/icons/VpnKey";
 
-import QRSvg from "../../Components/QR/QRSvg";
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
-import NavLink from "../../Components/Routing/NavLink";
+import QRSvg from "~components/QR/QRSvg";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import TranslateButton from "~components/TranslationHelpers/Button";
+import NavLink from "~components/Routing/NavLink";
 import OAuthManagement from "./OAuthManagement";
 import SideOptions from "./SideOptions";
 
-import { registrationLogOut, registrationLogin } from "../../Actions/registration";
-import BunqErrorHandler from "../../Functions/BunqErrorHandler";
+import { registrationLogOut, registrationLogin } from "~actions/registration";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 
 const styles = {
     card: {
diff --git a/src/react/Pages/Login/OAuthManagement.jsx b/src/pages/Login/OAuthManagement.tsx
similarity index 95%
rename from src/react/Pages/Login/OAuthManagement.jsx
rename to src/pages/Login/OAuthManagement.tsx
index 3f0510dc..255d37e5 100644
--- a/src/react/Pages/Login/OAuthManagement.jsx
+++ b/src/pages/Login/OAuthManagement.tsx
@@ -10,14 +10,14 @@ import FormControl from "@material-ui/core/FormControl";
 import CardContent from "@material-ui/core/CardContent";
 import CircularProgress from "@material-ui/core/CircularProgress";
 
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import TranslateButton from "~components/TranslationHelpers/Button";
 
-import Logger from "../../Functions/Logger";
-import BunqErrorHandler from "../../Functions/BunqErrorHandler";
+import Logger from "~functions/Logger";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 
-import { oauthSetDetails } from "../../Actions/oauth";
-import { openSnackbar } from "../../Actions/snackbar";
+import { oauthSetDetails } from "~actions/oauth";
+import { actions as snackbarActions } from "~store/snackbar";
 
 const styles = {
     button: {
@@ -65,7 +65,10 @@ const styles = {
     }
 };
 
-class OAuthManagement extends React.Component {
+class OAuthManagement extends React.Component<any> {
+    state: any;
+    isLoading: boolean;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -308,7 +311,7 @@ class OAuthManagement extends React.Component {
         );
 
         return (
-            <React.Fragment>
+            <>
                 <Card style={styles.card}>
                     <CardContent style={styles.cardContent}>
                         <Grid container spacing={8} justify={"center"}>
@@ -316,7 +319,7 @@ class OAuthManagement extends React.Component {
                         </Grid>
                     </CardContent>
                 </Card>
-            </React.Fragment>
+            </>
         );
     }
 }
@@ -337,7 +340,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        openSnackbar: message => dispatch(openSnackbar(message)),
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
 
         oauthSetDetails: (clientId, clientSecret, sandboxClientId, sandboxClientSecret) =>
             dispatch(oauthSetDetails(clientId, clientSecret, sandboxClientId, sandboxClientSecret)),
diff --git a/src/react/Pages/Login/SideOptions.jsx b/src/pages/Login/SideOptions.tsx
similarity index 96%
rename from src/react/Pages/Login/SideOptions.jsx
rename to src/pages/Login/SideOptions.tsx
index 672e3ced..7da70f1d 100644
--- a/src/react/Pages/Login/SideOptions.jsx
+++ b/src/pages/Login/SideOptions.tsx
@@ -7,8 +7,8 @@ import InputLabel from "@material-ui/core/InputLabel";
 import FormControl from "@material-ui/core/FormControl";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import TranslateButton from "~components/TranslationHelpers/Button";
 
 const styles = {
     card: {
diff --git a/src/react/Pages/LoginPassword.jsx b/src/pages/LoginPassword.tsx
similarity index 98%
rename from src/react/Pages/LoginPassword.jsx
rename to src/pages/LoginPassword.tsx
index 9afe72ad..b244d990 100644
--- a/src/react/Pages/LoginPassword.jsx
+++ b/src/pages/LoginPassword.tsx
@@ -18,9 +18,9 @@ import InputAdornment from "@material-ui/core/InputAdornment";
 import Visibility from "@material-ui/icons/Visibility";
 import VisibilityOff from "@material-ui/icons/VisibilityOff";
 
-import TranslateButton from "../Components/TranslationHelpers/Button";
+import TranslateButton from "~components/TranslationHelpers/Button";
 
-import { registrationLogOut, registrationSetPassword, registrationSkipPassword } from "../Actions/registration";
+import { registrationLogOut, registrationSetPassword, registrationSkipPassword } from "~actions/registration";
 
 const styles = {
     wrapperContainer: {
@@ -332,7 +332,7 @@ class LoginPassword extends React.Component {
                     ) : null}
 
                     {(hasStoredApiKey === true && useNoPassword === true) || hasStoredApiKey === false ? (
-                        <React.Fragment>
+                        <>
                             <Grid item xs={6} sm={4} />
                             <Grid item xs={6} sm={4}>
                                 <TranslateButton
@@ -344,7 +344,7 @@ class LoginPassword extends React.Component {
                                     Skip
                                 </TranslateButton>
                             </Grid>
-                        </React.Fragment>
+                        </>
                     ) : (
                         <Grid item xs={6} sm={4} />
                     )}
diff --git a/src/react/Pages/MasterCardActionInfo.jsx b/src/pages/MasterCardActionInfo.tsx
similarity index 91%
rename from src/react/Pages/MasterCardActionInfo.jsx
rename to src/pages/MasterCardActionInfo.tsx
index a432975d..49b4f690 100644
--- a/src/react/Pages/MasterCardActionInfo.jsx
+++ b/src/pages/MasterCardActionInfo.tsx
@@ -19,20 +19,20 @@ import BookmarkIcon from "@material-ui/icons/Bookmark";
 import SaveIcon from "@material-ui/icons/Save";
 import FilterIcon from "@material-ui/icons/FilterList";
 
-import FilterCreationDialog from "../Components/FilterCreationDialog";
-import PDFExportHelper from "../Components/PDFExportHelper/PDFExportHelper";
-import ExportDialog from "../Components/ExportDialog";
-import SpeedDial from "../Components/SpeedDial";
-import TransactionHeader from "../Components/TransactionHeader";
-import MoneyAmountLabel from "../Components/MoneyAmountLabel";
-import CategorySelectorDialog from "../Components/Categories/CategorySelectorDialog";
-import CategoryChips from "../Components/Categories/CategoryChips";
-import NoteTextForm from "../Components/NoteTexts/NoteTextForm";
-
-import { formatMoney, humanReadableDate } from "../Functions/Utils";
-import { masterCardActionText, masterCardActionParser } from "../Functions/EventStatusTexts";
-import { masterCardActionInfoUpdate } from "../Actions/master_card_action_info";
-import { applicationSetPDFMode } from "../Actions/application";
+import FilterCreationDialog from "~components/FilterCreationDialog";
+import PDFExportHelper from "~components/PDFExportHelper/PDFExportHelper";
+import ExportDialog from "~components/ExportDialog";
+import SpeedDial from "~components/SpeedDial";
+import TransactionHeader from "~components/TransactionHeader";
+import MoneyAmountLabel from "~components/MoneyAmountLabel";
+import CategorySelectorDialog from "~components/Categories/CategorySelectorDialog";
+import CategoryChips from "~components/Categories/CategoryChips";
+import NoteTextForm from "~components/NoteTexts/NoteTextForm";
+
+import { formatMoney, humanReadableDate } from "~functions/Utils";
+import { masterCardActionText, masterCardActionParser } from "~functions/EventStatusTexts";
+import { masterCardActionInfoUpdate } from "~actions/master_card_action_info";
+import { actions as applicationActions } from "~store/application";
 
 const styles = {
     btn: {},
@@ -48,7 +48,9 @@ const styles = {
     }
 };
 
-class MasterCardActionInfo extends React.Component {
+class MasterCardActionInfo extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -225,7 +227,7 @@ class MasterCardActionInfo extends React.Component {
                             </ListItem>
 
                             {isSettled === false && (
-                                <React.Fragment>
+                                <>
                                     <Divider />
                                     <ListItem>
                                         <ListItemText
@@ -233,7 +235,7 @@ class MasterCardActionInfo extends React.Component {
                                             secondary={settlementStatusText}
                                         />
                                     </ListItem>
-                                </React.Fragment>
+                                </>
                             )}
 
                             <Divider />
@@ -329,7 +331,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        applicationSetPDFMode: enabled => dispatch(applicationSetPDFMode(enabled)),
+        applicationSetPDFMode: enabled => dispatch(applicationActions.setPdfMode(enabled)),
 
         masterCardActionInfoUpdate: (user_id, account_id, master_card_action_id) =>
             dispatch(masterCardActionInfoUpdate(BunqJSClient, user_id, account_id, master_card_action_id))
diff --git a/src/react/Pages/NotFound.jsx b/src/pages/NotFound.tsx
similarity index 89%
rename from src/react/Pages/NotFound.jsx
rename to src/pages/NotFound.tsx
index dde75922..37d0f62f 100644
--- a/src/react/Pages/NotFound.jsx
+++ b/src/pages/NotFound.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import Helmet from "react-helmet";
 import { translate } from "react-i18next";
 
-import TranslateTypography from "../Components/TranslationHelpers/Typography";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
 
 class NotFound extends React.Component {
     constructor(props, context) {
diff --git a/src/react/Pages/Pay/ConfirmationDialog.jsx b/src/pages/Pay/ConfirmationDialog.tsx
similarity index 98%
rename from src/react/Pages/Pay/ConfirmationDialog.jsx
rename to src/pages/Pay/ConfirmationDialog.tsx
index 6e8c2e6a..fc4c9953 100644
--- a/src/react/Pages/Pay/ConfirmationDialog.jsx
+++ b/src/pages/Pay/ConfirmationDialog.tsx
@@ -12,7 +12,7 @@ import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 
-import { formatMoney } from "../../Functions/Utils";
+import { formatMoney } from "~functions/Utils";
 
 const styles = {};
 
diff --git a/src/react/Pages/Pay/Pay.jsx b/src/pages/Pay/Pay.tsx
similarity index 96%
rename from src/react/Pages/Pay/Pay.jsx
rename to src/pages/Pay/Pay.tsx
index 4fa8c5ad..57b8a337 100644
--- a/src/react/Pages/Pay/Pay.jsx
+++ b/src/pages/Pay/Pay.tsx
@@ -28,23 +28,23 @@ import ListIcon from "@material-ui/icons/List";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 
 import ConfirmationDialog from "./ConfirmationDialog";
-import AccountSelectorDialog from "../../Components/FormFields/AccountSelectorDialog";
-import MoneyFormatInput from "../../Components/FormFields/MoneyFormatInput";
-import TargetSelection from "../../Components/FormFields/TargetSelection";
-import SchedulePaymentForm from "../../Components/FormFields/SchedulePaymentForm";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
-import NavLink from "../../Components/Routing/NavLink";
-
-import { openSnackbar } from "../../Actions/snackbar";
-import { paySchedule, paySend } from "../../Actions/pay";
-import { paymentInfoUpdate } from "../../Actions/payments";
-import { pendingPaymentsAddPayment } from "../../Actions/pending_payments";
-
-import { getInternationalFormat, isValidPhonenumber } from "../../Functions/PhoneLib";
-import { formatMoney, getUTCDate } from "../../Functions/Utils";
-import { filterShareInviteMonetaryAccountResponses } from "../../Functions/DataFilters";
-import scheduleTexts from "../../Functions/ScheduleTexts";
-import { connectGetBudget, connectGetType, connectGetPermissions } from "../../Functions/ConnectGetPermissions";
+import AccountSelectorDialog from "~components/FormFields/AccountSelectorDialog";
+import MoneyFormatInput from "~components/FormFields/MoneyFormatInput";
+import TargetSelection from "~components/FormFields/TargetSelection";
+import SchedulePaymentForm from "~components/FormFields/SchedulePaymentForm";
+import TranslateButton from "~components/TranslationHelpers/Button";
+import NavLink from "~components/Routing/NavLink";
+
+import { paySchedule, paySend } from "~actions/pay";
+import { paymentInfoUpdate } from "~actions/payments";
+import { pendingPaymentsAddPayment } from "~actions/pending_payments";
+import { actions as snackbarActions } from "~store/snackbar";
+
+import { getInternationalFormat, isValidPhonenumber } from "~functions/PhoneLib";
+import { formatMoney, getUTCDate } from "~functions/Utils";
+import { filterShareInviteMonetaryAccountResponses } from "~functions/DataFilters";
+import scheduleTexts from "~functions/ScheduleTexts";
+import { connectGetBudget, connectGetType, connectGetPermissions } from "~functions/ConnectGetPermissions";
 
 const styles = {
     payButton: {
@@ -72,7 +72,9 @@ const styles = {
     }
 };
 
-class Pay extends React.Component {
+class Pay extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -149,7 +151,7 @@ class Pay extends React.Component {
     };
 
     // callbacks for input fields and selectors
-    setTargetType = type => event => {
+    setTargetType = type => () => {
         this.setState(
             {
                 targetType: type,
@@ -371,7 +373,7 @@ class Pay extends React.Component {
     };
 
     // validate only the taret inputs
-    validateTargetInput = (callback = () => {}) => {
+    validateTargetInput = (callback = (valid) => {}) => {
         const { target, ibanName, selectedAccount, selectedTargetAccount, targetType } = this.state;
 
         const ibanNameErrorCondition = ibanName.length < 1 || ibanName.length > 64;
@@ -493,7 +495,7 @@ class Pay extends React.Component {
         const targetInfoList = [];
         targets.forEach(target => {
             // check if the target is valid based onthe targetType
-            let targetInfo = false;
+            let targetInfo: any = false;
             switch (target.type) {
                 case "CONTACT":
                     const validEmail = EmailValidator.validate(target.value);
@@ -888,7 +890,7 @@ const mapDispatchToProps = (dispatch, props) => {
             dispatch(paySend(BunqJSClient, userId, accountId, description, amount, targets, draft)),
         paySchedule: (userId, accountId, description, amount, targets, schedule) =>
             dispatch(paySchedule(BunqJSClient, userId, accountId, description, amount, targets, schedule)),
-        openSnackbar: message => dispatch(openSnackbar(message)),
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
 
         paymentInfoUpdate: (userId, accountId) => dispatch(paymentInfoUpdate(BunqJSClient, userId, accountId)),
 
diff --git a/src/react/Pages/PaymentInfo.jsx b/src/pages/PaymentInfo.tsx
similarity index 89%
rename from src/react/Pages/PaymentInfo.jsx
rename to src/pages/PaymentInfo.tsx
index b220a514..c0454660 100644
--- a/src/react/Pages/PaymentInfo.jsx
+++ b/src/pages/PaymentInfo.tsx
@@ -18,23 +18,23 @@ import HelpIcon from "@material-ui/icons/Help";
 import BookmarkIcon from "@material-ui/icons/Bookmark";
 import FilterIcon from "@material-ui/icons/FilterList";
 
-import { formatMoney, humanReadableDate, formatIban } from "../Functions/Utils";
-import { paymentText, paymentTypeParser } from "../Functions/EventStatusTexts";
-
-import FilterCreationDialog from "../Components/FilterCreationDialog";
-import GeoLocationListItem from "../Components/GeoLocation/GeoLocationListItem";
-import PDFExportHelper from "../Components/PDFExportHelper/PDFExportHelper";
-import SpeedDial from "../Components/SpeedDial";
-import ExportDialog from "../Components/ExportDialog";
-import MoneyAmountLabel from "../Components/MoneyAmountLabel";
-import TransactionHeader from "../Components/TransactionHeader";
-import CategorySelectorDialog from "../Components/Categories/CategorySelectorDialog";
-import CategoryChips from "../Components/Categories/CategoryChips";
-import NoteTextForm from "../Components/NoteTexts/NoteTextForm";
-
-import { setTheme } from "../Actions/options";
-import { paymentsUpdate } from "../Actions/payment_info";
-import { applicationSetPDFMode } from "../Actions/application";
+import { formatMoney, humanReadableDate, formatIban } from "~functions/Utils";
+import { paymentText, paymentTypeParser } from "~functions/EventStatusTexts";
+
+import FilterCreationDialog from "~components/FilterCreationDialog";
+import GeoLocationListItem from "~components/GeoLocation/GeoLocationListItem";
+import PDFExportHelper from "~components/PDFExportHelper/PDFExportHelper";
+import SpeedDial from "~components/SpeedDial";
+import ExportDialog from "~components/ExportDialog";
+import MoneyAmountLabel from "~components/MoneyAmountLabel";
+import TransactionHeader from "~components/TransactionHeader";
+import CategorySelectorDialog from "~components/Categories/CategorySelectorDialog";
+import CategoryChips from "~components/Categories/CategoryChips";
+import NoteTextForm from "~components/NoteTexts/NoteTextForm";
+
+import { setTheme } from "~actions/options";
+import { paymentsUpdate } from "~actions/payment_info";
+import { actions as applicationActions } from "~store/application";
 
 const styles = {
     btn: {},
@@ -50,7 +50,9 @@ const styles = {
     }
 };
 
-class PaymentInfo extends React.Component {
+class PaymentInfo extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -197,12 +199,12 @@ class PaymentInfo extends React.Component {
                             </ListItem>
 
                             {paymentDescription && paymentDescription.length > 0 ? (
-                                <React.Fragment>
+                                <>
                                     <Divider />
                                     <ListItem>
                                         <ListItemText primary={t("Description")} secondary={paymentDescription} />
                                     </ListItem>
-                                </React.Fragment>
+                                </>
                             ) : null}
 
                             <Divider />
@@ -219,12 +221,12 @@ class PaymentInfo extends React.Component {
                             </ListItem>
 
                             {counterPartyIban && counterPartyIban.length > 0 ? (
-                                <React.Fragment>
+                                <>
                                     <Divider />
                                     <ListItem>
                                         <ListItemText primary={"IBAN"} secondary={formatIban(counterPartyIban)} />
                                     </ListItem>
-                                </React.Fragment>
+                                </>
                             ) : null}
 
                             <Divider />
@@ -324,7 +326,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        applicationSetPDFMode: enabled => dispatch(applicationSetPDFMode(enabled)),
+        applicationSetPDFMode: enabled => dispatch(applicationActions.setPdfMode(enabled)),
 
         updatePayment: (user_id, account_id, payment_id) =>
             dispatch(paymentsUpdate(BunqJSClient, user_id, account_id, payment_id)),
diff --git a/src/react/Pages/PendingPayments/ConfirmationDialog.jsx b/src/pages/PendingPayments/ConfirmationDialog.tsx
similarity index 100%
rename from src/react/Pages/PendingPayments/ConfirmationDialog.jsx
rename to src/pages/PendingPayments/ConfirmationDialog.tsx
diff --git a/src/react/Pages/PendingPayments/PendingPaymentRow.jsx b/src/pages/PendingPayments/PendingPaymentRow.tsx
similarity index 92%
rename from src/react/Pages/PendingPayments/PendingPaymentRow.jsx
rename to src/pages/PendingPayments/PendingPaymentRow.tsx
index b27caf9e..a595ba2c 100644
--- a/src/react/Pages/PendingPayments/PendingPaymentRow.jsx
+++ b/src/pages/PendingPayments/PendingPaymentRow.tsx
@@ -9,10 +9,10 @@ import Typography from "@material-ui/core/Typography";
 import SubdirectoryArrowRightIcon from "@material-ui/icons/SubdirectoryArrowRight";
 import DeleteIcon from "@material-ui/icons/Delete";
 
-import TargetChipList from "../../Components/FormFields/TargetChipList";
-import TargetChip from "../../Components/FormFields/TargetChip";
+import TargetChipList from "~components/FormFields/TargetChipList";
+import TargetChip from "~components/FormFields/TargetChip";
 
-import { formatMoney } from "../../Functions/Utils";
+import { formatMoney } from "~functions/Utils";
 
 const styles = {
     subdirectoryIconGrid: {
diff --git a/src/react/Pages/PendingPayments/PendingPayments.jsx b/src/pages/PendingPayments/PendingPayments.tsx
similarity index 96%
rename from src/react/Pages/PendingPayments/PendingPayments.jsx
rename to src/pages/PendingPayments/PendingPayments.tsx
index e3453bf9..5a8d7060 100644
--- a/src/react/Pages/PendingPayments/PendingPayments.jsx
+++ b/src/pages/PendingPayments/PendingPayments.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import Helmet from "react-helmet";
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
@@ -17,20 +17,20 @@ import Typography from "@material-ui/core/Typography";
 
 import DeleteIcon from "@material-ui/icons/Delete";
 
-import LazyAttachmentImage from "../../Components/AttachmentImage/LazyAttachmentImage";
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
+import LazyAttachmentImage from "~components/AttachmentImage/LazyAttachmentImage";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
 import ConfirmationDialog from "./ConfirmationDialog";
 import PendingPaymentRow from "./PendingPaymentRow";
 
-import { formatMoney } from "../../Functions/Utils";
-import BunqErrorHandler from "../../Functions/BunqErrorHandler";
+import { formatMoney } from "~functions/Utils";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 
 import {
     pendingPaymentsClear,
     pendingPaymentsClearAccount,
     pendingPaymentsRemovePayment
-} from "../../Actions/pending_payments";
-import { openSnackbar } from "../../Actions/snackbar";
+} from "~actions/pending_payments";
+import { actions as snackbarActions } from "~store/snackbar";
 
 const styles = {
     paper: {
@@ -68,7 +68,9 @@ const styles = {
     }
 };
 
-class PendingPayments extends React.Component {
+class PendingPayments extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -384,7 +386,7 @@ class PendingPayments extends React.Component {
                 <Grid item xs={8} style={styles.titleGrid}>
                     <TranslateTypography variant="h5">Pending payments</TranslateTypography>
                 </Grid>
-                <Grid item xs={4} style={styles.titleButtonGrid}>
+                <Grid item xs={4} style={styles.titleButtonGrid as CSSProperties}>
                     {componentList.length > 0 && (
                         <Button color="secondary" variant="outlined" onClick={this.clearAll}>
                             Clear all
@@ -480,7 +482,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     const BunqJSClient = ownProps.BunqJSClient;
     return {
-        openSnackbar: message => dispatch(openSnackbar(message)),
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
         BunqErrorHandler: (error, message) => BunqErrorHandler(dispatch, error, message, BunqJSClient),
 
         pendingPaymentsClear: () => dispatch(pendingPaymentsClear()),
diff --git a/src/react/Pages/Profile/Address.jsx b/src/pages/Profile/Address.tsx
similarity index 93%
rename from src/react/Pages/Profile/Address.jsx
rename to src/pages/Profile/Address.tsx
index d1eb6da3..a4749343 100644
--- a/src/react/Pages/Profile/Address.jsx
+++ b/src/pages/Profile/Address.tsx
@@ -2,8 +2,8 @@ import React from "react";
 import { Field } from "redux-form";
 import Grid from "@material-ui/core/Grid";
 
-import renderTextField from "../../Components/ReduxForm/Fields/renderTextField";
-import { required } from "../../Components/ReduxForm/Validators";
+import renderTextField from "~components/ReduxForm/Fields/renderTextField";
+import { required } from "~components/ReduxForm/Validators";
 
 const styles = {
     textField: {
diff --git a/src/react/Pages/Profile/BillingInfo.jsx b/src/pages/Profile/BillingInfo.tsx
similarity index 100%
rename from src/react/Pages/Profile/BillingInfo.jsx
rename to src/pages/Profile/BillingInfo.tsx
diff --git a/src/react/Pages/Profile/BusinessInfo.jsx b/src/pages/Profile/BusinessInfo.tsx
similarity index 96%
rename from src/react/Pages/Profile/BusinessInfo.jsx
rename to src/pages/Profile/BusinessInfo.tsx
index d2af266f..cee93cfa 100644
--- a/src/react/Pages/Profile/BusinessInfo.jsx
+++ b/src/pages/Profile/BusinessInfo.tsx
@@ -8,9 +8,9 @@ import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import TextField from "@material-ui/core/TextField";
 
-import { formatMoney } from "../../Functions/Utils";
+import { formatMoney } from "~functions/Utils";
 
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
 
 const styles = {
     paper: {
diff --git a/src/react/Pages/Profile/NotificationFilters.jsx b/src/pages/Profile/NotificationFilters.tsx
similarity index 98%
rename from src/react/Pages/Profile/NotificationFilters.jsx
rename to src/pages/Profile/NotificationFilters.tsx
index a9aa90a1..25b8ac8a 100644
--- a/src/react/Pages/Profile/NotificationFilters.jsx
+++ b/src/pages/Profile/NotificationFilters.tsx
@@ -18,7 +18,7 @@ import Select from "@material-ui/core/Select";
 import Collapse from "@material-ui/core/Collapse";
 
 import DeleteIcon from "@material-ui/icons/Delete";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
+import TranslateButton from "~components/TranslationHelpers/Button";
 
 const styles = {
     paper: {
@@ -163,7 +163,7 @@ class NotificationFilters extends React.Component {
         );
 
         return (
-            <React.Fragment>
+            <>
                 <Paper style={styles.paper}>
                     <Grid container spacing={16} justify="center">
                         <Grid item xs={12}>
@@ -251,7 +251,7 @@ class NotificationFilters extends React.Component {
                         </Collapse>
                     </Grid>
                 </Paper>
-            </React.Fragment>
+            </>
         );
     }
 }
diff --git a/src/react/Pages/Profile/Profile.jsx b/src/pages/Profile/Profile.tsx
similarity index 94%
rename from src/react/Pages/Profile/Profile.jsx
rename to src/pages/Profile/Profile.tsx
index c58252be..5fc4ba66 100644
--- a/src/react/Pages/Profile/Profile.jsx
+++ b/src/pages/Profile/Profile.tsx
@@ -16,22 +16,23 @@ import Chip from "@material-ui/core/Chip";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import UrlIcon from "@material-ui/icons/Link";
 
-import AliasList from "../../Components/AliasList";
-import UploadFullscreen from "../../Components/FileUpload/UploadFullscreen";
-import LazyAttachmentImage from "../../Components/AttachmentImage/LazyAttachmentImage";
+import AliasList from "~components/AliasList";
+import UploadFullscreen from "~components/FileUpload/UploadFullscreen";
+import LazyAttachmentImage from "~components/AttachmentImage/LazyAttachmentImage";
 import NotificationFilters from "./NotificationFilters";
 import ProfileDetailsForm from "./ProfileDetailsForm";
 import BusinessInfo from "./BusinessInfo";
 import BillingInfo from "./BillingInfo";
 
-import { openSnackbar } from "../../Actions/snackbar";
-import { userUpdateImage } from "../../Actions/user";
-import { usersUpdate } from "../../Actions/users";
+import { userUpdateImage } from "~actions/user";
+import { usersUpdate } from "~actions/users";
 
-import BunqErrorHandler from "../../Functions/BunqErrorHandler";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
 import { ListItemSecondaryAction } from "@material-ui/core";
 
-const styles = {
+import { actions as snackbarActions } from "~store/snackbar";
+
+const styles: any = {
     title: {
         marginBottom: 8
     },
@@ -63,7 +64,9 @@ const styles = {
     }
 };
 
-class Profile extends React.Component {
+class Profile extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -197,7 +200,7 @@ class Profile extends React.Component {
         let content = null;
         if (userLoading === false && this.state.loading === false) {
             content = (
-                <React.Fragment>
+                <>
                     <UploadFullscreen
                         BunqJSClient={this.props.BunqJSClient}
                         open={this.state.displayUploadScreen}
@@ -266,7 +269,7 @@ class Profile extends React.Component {
                         BunqJSClient={this.props.BunqJSClient}
                         BunqErrorHandler={this.props.BunqErrorHandler}
                     />
-                </React.Fragment>
+                </>
             );
         } else {
             content = (
@@ -315,7 +318,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        openSnackbar: message => dispatch(openSnackbar(message)),
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
         usersUpdate: updated => dispatch(usersUpdate(BunqJSClient, updated)),
         userUpdateImage: (userId, attachmentId) => dispatch(userUpdateImage(BunqJSClient, userId, attachmentId)),
 
diff --git a/src/react/Pages/Profile/ProfileDetailsForm.jsx b/src/pages/Profile/ProfileDetailsForm.tsx
similarity index 85%
rename from src/react/Pages/Profile/ProfileDetailsForm.jsx
rename to src/pages/Profile/ProfileDetailsForm.tsx
index 040343f4..2fd8c92e 100644
--- a/src/react/Pages/Profile/ProfileDetailsForm.jsx
+++ b/src/pages/Profile/ProfileDetailsForm.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import { Field, reduxForm } from "redux-form";
 import Grid from "@material-ui/core/Grid";
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import TranslateButton from "~components/TranslationHelpers/Button";
 import Address from "./Address";
 
-import renderTextField from "../../Components/ReduxForm/Fields/renderTextField";
-import { required } from "../../Components/ReduxForm/Validators";
+import renderTextField from "~components/ReduxForm/Fields/renderTextField";
+import { required } from "~components/ReduxForm/Validators";
 
 const styles = {
     title: {
diff --git a/src/react/Pages/RequestInquiry/ConfirmationDialog.jsx b/src/pages/RequestInquiry/ConfirmationDialog.tsx
similarity index 98%
rename from src/react/Pages/RequestInquiry/ConfirmationDialog.jsx
rename to src/pages/RequestInquiry/ConfirmationDialog.tsx
index bbd7c740..73cbdb69 100644
--- a/src/react/Pages/RequestInquiry/ConfirmationDialog.jsx
+++ b/src/pages/RequestInquiry/ConfirmationDialog.tsx
@@ -8,7 +8,7 @@ import Dialog from "@material-ui/core/Dialog";
 import DialogActions from "@material-ui/core/DialogActions";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
-import { formatMoney } from "../../Functions/Utils";
+import { formatMoney } from "~functions/Utils";
 
 export default class ConfirmationDialog extends React.Component {
     render() {
diff --git a/src/react/Pages/RequestInquiry/Options/AllowBunqMe.jsx b/src/pages/RequestInquiry/Options/AllowBunqMe.tsx
similarity index 100%
rename from src/react/Pages/RequestInquiry/Options/AllowBunqMe.jsx
rename to src/pages/RequestInquiry/Options/AllowBunqMe.tsx
diff --git a/src/react/Pages/RequestInquiry/Options/MinimumAge.jsx b/src/pages/RequestInquiry/Options/MinimumAge.tsx
similarity index 100%
rename from src/react/Pages/RequestInquiry/Options/MinimumAge.jsx
rename to src/pages/RequestInquiry/Options/MinimumAge.tsx
diff --git a/src/react/Pages/RequestInquiry/RequestInquiry.jsx b/src/pages/RequestInquiry/RequestInquiry.tsx
similarity index 96%
rename from src/react/Pages/RequestInquiry/RequestInquiry.jsx
rename to src/pages/RequestInquiry/RequestInquiry.tsx
index 81778196..470656c8 100644
--- a/src/react/Pages/RequestInquiry/RequestInquiry.jsx
+++ b/src/pages/RequestInquiry/RequestInquiry.tsx
@@ -13,25 +13,26 @@ import Button from "@material-ui/core/Button";
 
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
-import AccountSelectorDialog from "../../Components/FormFields/AccountSelectorDialog";
-import TargetSelection from "../../Components/FormFields/TargetSelection";
-import MoneyFormatInput from "../../Components/FormFields/MoneyFormatInput";
-import RedirectUrl from "../../Components/FormFields/RedirectUrl";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import AccountSelectorDialog from "~components/FormFields/AccountSelectorDialog";
+import TargetSelection from "~components/FormFields/TargetSelection";
+import MoneyFormatInput from "~components/FormFields/MoneyFormatInput";
+import RedirectUrl from "~components/FormFields/RedirectUrl";
+import TranslateButton from "~components/TranslationHelpers/Button";
 import ConfirmationDialog from "./ConfirmationDialog";
 
 import SplitAmountForm from "./SplitAmountForm";
 import MinimumAge from "./Options/MinimumAge";
 import AllowBunqMe from "./Options/AllowBunqMe";
 
-import { openSnackbar } from "../../Actions/snackbar";
-import { requestInquirySend } from "../../Actions/request_inquiry";
-import { requestInquiriesUpdate } from "../../Actions/request_inquiries";
+import { requestInquirySend } from "~actions/request_inquiry";
+import { requestInquiriesUpdate } from "~actions/request_inquiries";
 
-import { getInternationalFormat, isValidPhonenumber } from "../../Functions/PhoneLib";
+import { getInternationalFormat, isValidPhonenumber } from "~functions/PhoneLib";
 import TotalSplitHelper from "./TotalSplitHelper";
-import { connectGetPermissions } from "../../Functions/ConnectGetPermissions";
+import { connectGetPermissions } from "~functions/ConnectGetPermissions";
+
+import { actions as snackbarActions } from "~store/snackbar";
 
 const styles = {
     payButton: {
@@ -49,7 +50,9 @@ const styles = {
     titleGrid: { display: "flex", alignItems: "center" }
 };
 
-class RequestInquiry extends React.Component {
+class RequestInquiry extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -658,7 +661,7 @@ const mapDispatchToProps = (dispatch, props) => {
 
         requestInquiryUpdate: (userId, accountId) => dispatch(requestInquiriesUpdate(BunqJSClient, userId, accountId)),
 
-        openSnackbar: message => dispatch(openSnackbar(message))
+        openSnackbar: message => dispatch(snackbarActions.open({ message }))
     };
 };
 
diff --git a/src/react/Pages/RequestInquiry/SplitAmountForm.jsx b/src/pages/RequestInquiry/SplitAmountForm.tsx
similarity index 97%
rename from src/react/Pages/RequestInquiry/SplitAmountForm.jsx
rename to src/pages/RequestInquiry/SplitAmountForm.tsx
index 9a7b6f57..96b58854 100644
--- a/src/react/Pages/RequestInquiry/SplitAmountForm.jsx
+++ b/src/pages/RequestInquiry/SplitAmountForm.tsx
@@ -6,7 +6,7 @@ import Switch from "@material-ui/core/Switch";
 import Table from "@material-ui/core/Table";
 import TableBody from "@material-ui/core/TableBody";
 
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
 import SplitAmountItem from "./SplitAmountItem";
 import TotalSplitHelper from "./TotalSplitHelper";
 
diff --git a/src/react/Pages/RequestInquiry/SplitAmountItem.jsx b/src/pages/RequestInquiry/SplitAmountItem.tsx
similarity index 96%
rename from src/react/Pages/RequestInquiry/SplitAmountItem.jsx
rename to src/pages/RequestInquiry/SplitAmountItem.tsx
index 9efcb599..fc7297a3 100644
--- a/src/react/Pages/RequestInquiry/SplitAmountItem.jsx
+++ b/src/pages/RequestInquiry/SplitAmountItem.tsx
@@ -10,9 +10,9 @@ import RemoveIcon from "@material-ui/icons/Remove";
 import TableRow from "@material-ui/core/TableRow";
 import TableCell from "@material-ui/core/TableCell";
 
-import { formatMoney } from "../../Functions/Utils";
+import { formatMoney } from "~functions/Utils";
 
-import AccountListItemChip from "../../Components/AccountList/AccountListItemChip";
+import AccountListItemChip from "~components/AccountList/AccountListItemChip";
 
 const styles = {
     chip: {
diff --git a/src/react/Pages/RequestInquiry/TotalSplitHelper.js b/src/pages/RequestInquiry/TotalSplitHelper.ts
similarity index 100%
rename from src/react/Pages/RequestInquiry/TotalSplitHelper.js
rename to src/pages/RequestInquiry/TotalSplitHelper.ts
diff --git a/src/react/Pages/RequestInquiryInfo.jsx b/src/pages/RequestInquiryInfo.tsx
similarity index 90%
rename from src/react/Pages/RequestInquiryInfo.jsx
rename to src/pages/RequestInquiryInfo.tsx
index c3446c39..6796fa2a 100644
--- a/src/react/Pages/RequestInquiryInfo.jsx
+++ b/src/pages/RequestInquiryInfo.tsx
@@ -20,22 +20,22 @@ import HelpIcon from "@material-ui/icons/Help";
 import SaveIcon from "@material-ui/icons/Save";
 import FilterIcon from "@material-ui/icons/FilterList";
 
-import FilterCreationDialog from "../Components/FilterCreationDialog";
-import ExportDialog from "../Components/ExportDialog";
-import PDFExportHelper from "../Components/PDFExportHelper/PDFExportHelper";
-import SpeedDial from "../Components/SpeedDial";
-import TranslateButton from "../Components/TranslationHelpers/Button";
-import MoneyAmountLabel from "../Components/MoneyAmountLabel";
-import TransactionHeader from "../Components/TransactionHeader";
-import CategorySelector from "../Components/Categories/CategorySelector";
-import NoteTextForm from "../Components/NoteTexts/NoteTextForm";
-import CopyToClipboardWrap from "../Components/CopyToClipboardWrap";
-
-import { formatMoney, humanReadableDate } from "../Functions/Utils";
-import { requestInquiryText } from "../Functions/EventStatusTexts";
-import { requestInquiryCancel } from "../Actions/request_inquiry";
-import { requestInquiryUpdate } from "../Actions/request_inquiry_info";
-import { applicationSetPDFMode } from "../Actions/application";
+import FilterCreationDialog from "~components/FilterCreationDialog";
+import ExportDialog from "~components/ExportDialog";
+import PDFExportHelper from "~components/PDFExportHelper/PDFExportHelper";
+import SpeedDial from "~components/SpeedDial";
+import TranslateButton from "~components/TranslationHelpers/Button";
+import MoneyAmountLabel from "~components/MoneyAmountLabel";
+import TransactionHeader from "~components/TransactionHeader";
+import CategorySelector from "~components/Categories/CategorySelector";
+import NoteTextForm from "~components/NoteTexts/NoteTextForm";
+import CopyToClipboardWrap from "~components/CopyToClipboardWrap";
+
+import { formatMoney, humanReadableDate } from "~functions/Utils";
+import { requestInquiryText } from "~functions/EventStatusTexts";
+import { requestInquiryCancel } from "~actions/request_inquiry";
+import { requestInquiryUpdate } from "~actions/request_inquiry_info";
+import { actions as applicationActions } from "~store/application";
 
 const styles = {
     btn: {},
@@ -54,7 +54,9 @@ const styles = {
     }
 };
 
-class RequestInquiryInfo extends React.Component {
+class RequestInquiryInfo extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -223,7 +225,7 @@ class RequestInquiryInfo extends React.Component {
                                 <ListItemText primary={t("Date")} secondary={paymentDate} />
                             </ListItem>
                             {requestInquiry.bunqme_share_url ? (
-                                <React.Fragment>
+                                <>
                                     <Divider />
                                     <ListItem>
                                         <ListItemText
@@ -238,10 +240,10 @@ class RequestInquiryInfo extends React.Component {
                                             </CopyToClipboardWrap>
                                         </ListItemSecondaryAction>
                                     </ListItem>
-                                </React.Fragment>
+                                </>
                             ) : null}
                             {requestInquiry.counterparty_alias.iban ? (
-                                <React.Fragment>
+                                <>
                                     <Divider />
                                     <ListItem>
                                         <ListItemText
@@ -249,7 +251,7 @@ class RequestInquiryInfo extends React.Component {
                                             secondary={requestInquiry.counterparty_alias.iban}
                                         />
                                     </ListItem>
-                                </React.Fragment>
+                                </>
                             ) : null}
                             <Divider />
                         </List>
@@ -349,7 +351,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        applicationSetPDFMode: enabled => dispatch(applicationSetPDFMode(enabled)),
+        applicationSetPDFMode: enabled => dispatch(applicationActions.setPdfMode(enabled)),
 
         requestInquiryUpdate: (user_id, account_id, request_inquiry_id) =>
             dispatch(requestInquiryUpdate(BunqJSClient, user_id, account_id, request_inquiry_id)),
diff --git a/src/react/Pages/RequestResponseInfo/AddressForm.jsx b/src/pages/RequestResponseInfo/AddressForm.tsx
similarity index 100%
rename from src/react/Pages/RequestResponseInfo/AddressForm.jsx
rename to src/pages/RequestResponseInfo/AddressForm.tsx
diff --git a/src/react/Pages/RequestResponseInfo/RequestResponseInfo.jsx b/src/pages/RequestResponseInfo/RequestResponseInfo.tsx
similarity index 92%
rename from src/react/Pages/RequestResponseInfo/RequestResponseInfo.jsx
rename to src/pages/RequestResponseInfo/RequestResponseInfo.tsx
index d4413c43..dfeca6ca 100644
--- a/src/react/Pages/RequestResponseInfo/RequestResponseInfo.jsx
+++ b/src/pages/RequestResponseInfo/RequestResponseInfo.tsx
@@ -16,27 +16,28 @@ import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import HelpIcon from "@material-ui/icons/Help";
 import SaveIcon from "@material-ui/icons/Save";
 import FilterIcon from "@material-ui/icons/FilterList";
-
-import FilterCreationDialog from "../../Components/FilterCreationDialog";
-import AccountSelectorDialog from "../../Components/FormFields/AccountSelectorDialog";
-import PDFExportHelper from "../../Components/PDFExportHelper/PDFExportHelper";
-import ExportDialog from "../../Components/ExportDialog";
-import SpeedDial from "../../Components/SpeedDial";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
-import MoneyAmountLabel from "../../Components/MoneyAmountLabel";
-import TransactionHeader from "../../Components/TransactionHeader";
-import CategorySelector from "../../Components/Categories/CategorySelector";
-import NoteTextForm from "../../Components/NoteTexts/NoteTextForm";
-import GeoLocationListItem from "../../Components/GeoLocation/GeoLocationListItem";
-
-import { formatMoney, humanReadableDate } from "../../Functions/Utils";
-import { requestResponseText, requestResponseTypeParser } from "../../Functions/EventStatusTexts";
-
-import { requestResponseUpdate } from "../../Actions/request_response_info";
-import { requestResponseReject, requestResponseAccept } from "../../Actions/request_response";
-import { applicationSetPDFMode } from "../../Actions/application";
-
-const styles = {
+import { shareInviteMonetaryAccountInquiryChangeStatus } from "~actions/share_invite_monetary_account_inquiry";
+
+import FilterCreationDialog from "~components/FilterCreationDialog";
+import AccountSelectorDialog from "~components/FormFields/AccountSelectorDialog";
+import PDFExportHelper from "~components/PDFExportHelper/PDFExportHelper";
+import ExportDialog from "~components/ExportDialog";
+import SpeedDial from "~components/SpeedDial";
+import TranslateButton from "~components/TranslationHelpers/Button";
+import MoneyAmountLabel from "~components/MoneyAmountLabel";
+import TransactionHeader from "~components/TransactionHeader";
+import CategorySelector from "~components/Categories/CategorySelector";
+import NoteTextForm from "~components/NoteTexts/NoteTextForm";
+import GeoLocationListItem from "~components/GeoLocation/GeoLocationListItem";
+
+import { formatMoney, humanReadableDate } from "~functions/Utils";
+import { requestResponseText, requestResponseTypeParser } from "~functions/EventStatusTexts";
+
+import { requestResponseUpdate } from "~actions/request_response_info";
+import { requestResponseReject, requestResponseAccept } from "~actions/request_response";
+import { actions as applicationActions } from "~store/application";
+
+const styles: any = {
     btn: {},
     button: {
         width: "100%"
@@ -53,7 +54,9 @@ const styles = {
     }
 };
 
-class RequestResponseInfo extends React.Component {
+class RequestResponseInfo extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -206,7 +209,7 @@ class RequestResponseInfo extends React.Component {
             noteTextsForm = <NoteTextForm BunqJSClient={this.props.BunqJSClient} event={requestResponse} />;
 
             content = (
-                <React.Fragment>
+                <>
                     <Paper style={styles.paper}>
                         <Grid container spacing={24} align={"center"} justify={"center"}>
                             <TransactionHeader
@@ -262,16 +265,16 @@ class RequestResponseInfo extends React.Component {
                                     </ListItem>
 
                                     {timeRespondedDate ? (
-                                        <React.Fragment>
+                                        <>
                                             <Divider />
                                             <ListItem>
                                                 <ListItemText primary={t("Paid")} secondary={timeRespondedDate} />
                                             </ListItem>
-                                        </React.Fragment>
+                                        </>
                                     ) : null}
 
                                     {requestResponse.counterparty_alias && requestResponse.counterparty_alias.iban ? (
-                                        <React.Fragment>
+                                        <>
                                             <Divider />
                                             <ListItem>
                                                 <ListItemText
@@ -279,7 +282,7 @@ class RequestResponseInfo extends React.Component {
                                                     secondary={requestResponse.counterparty_alias.iban}
                                                 />
                                             </ListItem>
-                                        </React.Fragment>
+                                        </>
                                     ) : null}
 
                                     <Divider />
@@ -370,7 +373,7 @@ class RequestResponseInfo extends React.Component {
                             </Paper>
                         )
                     ) : null}
-                </React.Fragment>
+                </>
             );
         }
 
@@ -453,7 +456,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        applicationSetPDFMode: enabled => dispatch(applicationSetPDFMode(enabled)),
+        applicationSetPDFMode: enabled => dispatch(applicationActions.setPdfMode(enabled)),
 
         requestResponseUpdate: (user_id, account_id, request_response_id) =>
             dispatch(requestResponseUpdate(BunqJSClient, user_id, account_id, request_response_id)),
diff --git a/src/react/Pages/RuleDashboard/RuleCollectionItem.jsx b/src/pages/RuleDashboard/RuleCollectionItem.tsx
similarity index 88%
rename from src/react/Pages/RuleDashboard/RuleCollectionItem.jsx
rename to src/pages/RuleDashboard/RuleCollectionItem.tsx
index e7f52f46..7cf16caf 100644
--- a/src/react/Pages/RuleDashboard/RuleCollectionItem.jsx
+++ b/src/pages/RuleDashboard/RuleCollectionItem.tsx
@@ -4,10 +4,12 @@ import ListItemText from "@material-ui/core/ListItemText";
 import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import Divider from "@material-ui/core/Divider";
 
-import NavLink from "../../Components/Routing/NavLink";
-import CategoryIcon from "../../Components/Categories/CategoryIcon";
+import NavLink from "~components/Routing/NavLink";
+import CategoryIcon from "~components/Categories/CategoryIcon";
+
+class RuleCollectionItem extends React.Component<any> {
+    state: any;
 
-class RuleCollectionItem extends React.Component {
     constructor(props, context) {
         super(props, context);
         this.state = {};
diff --git a/src/react/Pages/RuleDashboard/RuleDashboard.jsx b/src/pages/RuleDashboard/RuleDashboard.tsx
similarity index 83%
rename from src/react/Pages/RuleDashboard/RuleDashboard.jsx
rename to src/pages/RuleDashboard/RuleDashboard.tsx
index ccdac1bb..25cbbcea 100644
--- a/src/react/Pages/RuleDashboard/RuleDashboard.jsx
+++ b/src/pages/RuleDashboard/RuleDashboard.tsx
@@ -8,21 +8,22 @@ import Paper from "@material-ui/core/Paper";
 import Button from "@material-ui/core/Button";
 import List from "@material-ui/core/List";
 
-import FileUploadIcon from "../../Components/CustomSVG/FileUpload";
-import FileDownloadIcon from "../../Components/CustomSVG/FileDownload";
+import FileUploadIcon from "~components/CustomSVG/FileUpload";
+import FileDownloadIcon from "~components/CustomSVG/FileDownload";
 import AddIcon from "@material-ui/icons/Add";
 import BookmarkIcon from "@material-ui/icons/Bookmark";
 
 import RuleCollectionItem from "./RuleCollectionItem";
-import NavLink from "../../Components/Routing/NavLink";
-import ExportDialog from "../../Components/ExportDialog";
-import ImportDialog from "../../Components/ImportDialog";
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
-import RuleCollection from "../../Types/RuleCollection";
-
-import { setCategoryRule } from "../../Actions/category_rules";
-import { openSnackbar } from "../../Actions/snackbar";
-import { setCategoryConnectionMultiple } from "../../Actions/categories";
+import NavLink from "~components/Routing/NavLink";
+import ExportDialog from "~components/ExportDialog";
+import ImportDialog from "~components/ImportDialog";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import RuleCollection from "~types/RuleCollection";
+
+import { actions as snackbarActions } from "~store/snackbar";
+import { actions as categoryRulesActions } from "~store/categoryRules";
+import { actions as categoriesActions } from "~store/categories";
+
 import Bookmark from "@material-ui/icons/Bookmark";
 
 const styles = {
@@ -37,7 +38,9 @@ const styles = {
     }
 };
 
-class RuleDashboard extends React.Component {
+class RuleDashboard extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -46,10 +49,10 @@ class RuleDashboard extends React.Component {
         };
     }
 
-    openImportDialog = event => this.setState({ openImportDialog: true });
-    closeImportDialog = event => this.setState({ openImportDialog: false });
-    openExportDialog = event => this.setState({ openExportDialog: true });
-    closeExportDialog = event => this.setState({ openExportDialog: false });
+    openImportDialog = () => this.setState({ openImportDialog: true });
+    closeImportDialog = () => this.setState({ openImportDialog: false });
+    openExportDialog = () => this.setState({ openExportDialog: true });
+    closeExportDialog = () => this.setState({ openExportDialog: false });
 
     importData = ruleCollectionsReceived => {
         this.closeImportDialog();
@@ -104,7 +107,7 @@ class RuleDashboard extends React.Component {
         const { categoryRules, categories, t } = this.props;
 
         const categoryRulesList = Object.keys(categoryRules).map(categoryRuleId => (
-            <RuleCollectionItem ruleCollection={categoryRules[categoryRuleId]} categories={categories} t={t} />
+            <RuleCollectionItem ruleCollection={categoryRules[categoryRuleId]} categories={categories} t={t}/>
         ));
         const categoryRulesArray = Object.values(categoryRules);
 
@@ -141,7 +144,7 @@ class RuleDashboard extends React.Component {
                                     style={styles.button}
                                 >
                                     {t("New")}
-                                    <AddIcon style={styles.buttonIcons} />
+                                    <AddIcon style={styles.buttonIcons}/>
                                 </Button>
                             </Grid>
 
@@ -154,21 +157,21 @@ class RuleDashboard extends React.Component {
                                     style={styles.button}
                                 >
                                     {t("Manage categories")}
-                                    <BookmarkIcon style={styles.buttonIcons} />
+                                    <BookmarkIcon style={styles.buttonIcons}/>
                                 </Button>
                             </Grid>
 
                             <Grid item xs={12}>
                                 <Button variant="outlined" style={styles.button} onClick={this.openImportDialog}>
                                     {t("Import")}
-                                    <FileDownloadIcon style={styles.buttonIcons} />
+                                    <FileDownloadIcon style={styles.buttonIcons}/>
                                 </Button>
                             </Grid>
 
                             <Grid item xs={12}>
                                 <Button variant="outlined" style={styles.button} onClick={this.openExportDialog}>
                                     {t("Export")}
-                                    <FileUploadIcon style={styles.buttonIcons} />
+                                    <FileUploadIcon style={styles.buttonIcons}/>
                                 </Button>
                             </Grid>
                         </Grid>
@@ -184,7 +187,7 @@ class RuleDashboard extends React.Component {
 
                             <Grid item xs={12}>
                                 <List>
-                                    <Divider />
+                                    <Divider/>
                                     {categoryRulesList}
                                 </List>
                             </Grid>
@@ -205,9 +208,8 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        openSnackbar: message => dispatch(openSnackbar(message)),
-        setCategoryConnectionMultiple: (...params) => dispatch(setCategoryConnectionMultiple(...params)),
-        setCategoryRule: rule_collection => dispatch(setCategoryRule(rule_collection))
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
+        setCategoryRule: rule_collection => dispatch(categoryRulesActions.setRule(rule_collection))
     };
 };
 
diff --git a/src/react/Pages/RulePage/NewRuleItemMenu.tsx b/src/pages/RulePage/NewRuleItemMenu.tsx
similarity index 94%
rename from src/react/Pages/RulePage/NewRuleItemMenu.tsx
rename to src/pages/RulePage/NewRuleItemMenu.tsx
index 83c33d9e..387a5c9d 100644
--- a/src/react/Pages/RulePage/NewRuleItemMenu.tsx
+++ b/src/pages/RulePage/NewRuleItemMenu.tsx
@@ -6,9 +6,9 @@ import MenuItem from "@material-ui/core/MenuItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
 
-import { RuleTypes } from "../../Types/Types";
+import { RuleTypes } from "~types/Types";
 
-import FileDownloadIcon from "../../Components/CustomSVG/FileDownload";
+import FileDownloadIcon from "~components/CustomSVG/FileDownload";
 import AddIcon from "@material-ui/icons/Add";
 
 class NewRuleItemMenu extends React.Component<any, any> {
diff --git a/src/react/Pages/RulePage/RuleCollectionMenu.tsx b/src/pages/RulePage/RuleCollectionMenu.tsx
similarity index 97%
rename from src/react/Pages/RulePage/RuleCollectionMenu.tsx
rename to src/pages/RulePage/RuleCollectionMenu.tsx
index 93cdbed1..5eb74aef 100644
--- a/src/react/Pages/RulePage/RuleCollectionMenu.tsx
+++ b/src/pages/RulePage/RuleCollectionMenu.tsx
@@ -7,7 +7,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
 
-import FileUploadIcon from "../../Components/CustomSVG/FileUpload";
+import FileUploadIcon from "~components/CustomSVG/FileUpload";
 
 import MoreVertIcon from "@material-ui/icons/MoreVert";
 import DeleteIcon from "@material-ui/icons/Delete";
diff --git a/src/react/Pages/RulePage/RuleCollectionPreview.tsx b/src/pages/RulePage/RuleCollectionPreview.tsx
similarity index 95%
rename from src/react/Pages/RulePage/RuleCollectionPreview.tsx
rename to src/pages/RulePage/RuleCollectionPreview.tsx
index 93c18c06..abe2ae1f 100644
--- a/src/react/Pages/RulePage/RuleCollectionPreview.tsx
+++ b/src/pages/RulePage/RuleCollectionPreview.tsx
@@ -7,11 +7,11 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
 import List from "@material-ui/core/List";
 const Paper: any = PaperWrapper;
 
-import RuleCollection, { EventObjectResult } from "../../Types/RuleCollection";
+import RuleCollection, { EventObjectResult } from "~types/RuleCollection";
 import RuleCollectionPreviewItem from "./RuleCollectionPreviewItem";
 
 // import typed worker
-const RuleCollectionCheckWorker: any = require("worker-loader!../../WebWorkers/rule_collection_check.worker.js");
+const RuleCollectionCheckWorker: any = require("worker-loader!../../webworkers/rule_collection_check.worker.js");
 
 const styles = {
     toggleVisibilityButton: {
@@ -120,11 +120,11 @@ class RuleCollectionPreview extends React.Component<any, any> {
         }
 
         return (
-            <React.Fragment>
+            <>
                 {toggleDisplay}
 
                 {previewContent}
-            </React.Fragment>
+            </>
         );
     }
 }
diff --git a/src/react/Pages/RulePage/RuleCollectionPreviewItem.tsx b/src/pages/RulePage/RuleCollectionPreviewItem.tsx
similarity index 93%
rename from src/react/Pages/RulePage/RuleCollectionPreviewItem.tsx
rename to src/pages/RulePage/RuleCollectionPreviewItem.tsx
index 373eb2a7..367d6d63 100644
--- a/src/react/Pages/RulePage/RuleCollectionPreviewItem.tsx
+++ b/src/pages/RulePage/RuleCollectionPreviewItem.tsx
@@ -12,11 +12,11 @@ import Tab from "@material-ui/core/Tab";
 import CheckIcon from "@material-ui/icons/Check";
 import CrossIcon from "@material-ui/icons/Cancel";
 
-import { EventObjectMatchingRule, EventObjectResult } from "../../Types/RuleCollection";
-import TypeRule from "../../Types/Rules/TypeRule";
-import ValueRule from "../../Types/Rules/ValueRule";
-import TransactionAmountRule from "../../Types/Rules/TransactionAmountRule";
-import CopyToClipboardWrap from "../../Components/CopyToClipboardWrap";
+import { EventObjectMatchingRule, EventObjectResult } from "~types/RuleCollection";
+import TypeRule from "~types/Rules/TypeRule";
+import ValueRule from "~types/Rules/ValueRule";
+import TransactionAmountRule from "~types/Rules/TransactionAmountRule";
+import CopyToClipboardWrap from "~components/CopyToClipboardWrap";
 
 const styles = {};
 
@@ -122,7 +122,7 @@ class RuleCollectionPreviewItem extends React.Component<any, any> {
         }
 
         return (
-            <React.Fragment>
+            <>
                 <ListItem dense button onClick={() => this.setState({ open: !this.state.open })}>
                     <Avatar>{event.matches ? <CheckIcon /> : <CrossIcon />}</Avatar>
                     <ListItemText primary={`${event.item.description}`} secondary={`Type: ${event.type}`} />
@@ -140,7 +140,7 @@ class RuleCollectionPreviewItem extends React.Component<any, any> {
                     {this.state.tabIndex === 1 && valueItems}
                     <Divider />
                 </Collapse>
-            </React.Fragment>
+            </>
         );
     }
 }
diff --git a/src/react/Pages/RulePage/RuleCreator.tsx b/src/pages/RulePage/RuleCreator.tsx
similarity index 97%
rename from src/react/Pages/RulePage/RuleCreator.tsx
rename to src/pages/RulePage/RuleCreator.tsx
index 9d0f7dbb..759219f6 100644
--- a/src/react/Pages/RulePage/RuleCreator.tsx
+++ b/src/pages/RulePage/RuleCreator.tsx
@@ -19,10 +19,10 @@ import TableHead from "@material-ui/core/TableHead";
 import TableRow from "@material-ui/core/TableRow";
 import TableCell from "@material-ui/core/TableCell";
 
-import CategoryChip from "../../Components/Categories/CategoryChip";
-import ExportDialog2 from "../../Components/ExportDialog";
+import CategoryChip from "~components/Categories/CategoryChip";
+import ExportDialog2 from "~components/ExportDialog";
 const ExportDialog: any = ExportDialog2;
-import ImportDialog from "../../Components/ImportDialog";
+import ImportDialog from "~components/ImportDialog";
 import NewRuleItemMenu from "./NewRuleItemMenu";
 import RuleCollectionMenu2 from "./RuleCollectionMenu";
 const RuleCollectionMenu: any = RuleCollectionMenu2;
@@ -33,9 +33,9 @@ import ValueRuleItem from "./RuleTypeItems/ValueRuleItem";
 import TransactionAmountRuleItem from "./RuleTypeItems/TransactionAmountRuleItem";
 import ItemTypeRuleItem from "./RuleTypeItems/ItemTypeRuleItem";
 
-import Rule from "../../Types/Rules/Rule";
-import { RuleTypes } from "../../Types/Types";
-import { default as RuleCollection, RuleCollectionMatchType } from "../../Types/RuleCollection";
+import Rule from "~types/Rules/Rule";
+import { RuleTypes } from "~types/Types";
+import { default as RuleCollection, RuleCollectionMatchType } from "~types/RuleCollection";
 
 const styles = {
     title: {
@@ -352,7 +352,7 @@ class RuleCreator extends React.Component<any, any> {
         });
 
         return (
-            <React.Fragment>
+            <>
                 <Paper style={styles.wrapper}>
                     <Grid container spacing={16}>
                         <Grid item xs={11}>
@@ -461,7 +461,7 @@ class RuleCreator extends React.Component<any, any> {
                     title={t("Import rule")}
                     open={this.state.openImportDialog}
                 />
-            </React.Fragment>
+            </>
         );
     }
 }
diff --git a/src/react/Pages/RulePage/RuleItemMenu.tsx b/src/pages/RulePage/RuleItemMenu.tsx
similarity index 97%
rename from src/react/Pages/RulePage/RuleItemMenu.tsx
rename to src/pages/RulePage/RuleItemMenu.tsx
index 8e53e84a..c9365e7c 100644
--- a/src/react/Pages/RulePage/RuleItemMenu.tsx
+++ b/src/pages/RulePage/RuleItemMenu.tsx
@@ -7,7 +7,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
 
-import FileUploadIcon from "../../Components/CustomSVG/FileUpload";
+import FileUploadIcon from "~components/CustomSVG/FileUpload";
 
 import DeleteIcon from "@material-ui/icons/Delete";
 import MoreVertIcon from "@material-ui/icons/MoreVert";
diff --git a/src/react/Pages/RulePage/RulePage.jsx b/src/pages/RulePage/RulePage.tsx
similarity index 91%
rename from src/react/Pages/RulePage/RulePage.jsx
rename to src/pages/RulePage/RulePage.tsx
index 28c7cee9..7ffe195c 100644
--- a/src/react/Pages/RulePage/RulePage.jsx
+++ b/src/pages/RulePage/RulePage.tsx
@@ -6,13 +6,16 @@ import Grid from "@material-ui/core/Grid";
 import Button from "@material-ui/core/Button";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 
-import RuleCreator from "./RuleCreator.tsx";
-import RuleCollection from "../../Types/RuleCollection";
+import RuleCreator from "./RuleCreator";
+import RuleCollection from "~types/RuleCollection";
 import RuleCollectionPreview from "./RuleCollectionPreview";
-import { setCategoryRule, removeCategoryRule } from "../../Actions/category_rules";
-import { openSnackbar } from "../../Actions/snackbar";
 
-class RulesPage extends React.Component {
+import { actions as categoryRulesActions } from "~store/categoryRules";
+import { actions as snackbarActions } from "~store/snackbar";
+
+class RulesPage extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
 
@@ -166,9 +169,9 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        openSnackbar: message => dispatch(openSnackbar(message)),
-        setCategoryRule: rule_collection => dispatch(setCategoryRule(rule_collection)),
-        removeCategoryRule: category_rule_id => dispatch(removeCategoryRule(category_rule_id))
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
+        setCategoryRule: rule_collection => dispatch(categoryRulesActions.setRule(rule_collection)),
+        removeCategoryRule: category_rule_id => dispatch(categoryRulesActions.removeRule(category_rule_id))
     };
 };
 
diff --git a/src/react/Pages/RulePage/RuleTypeItems/AccountRuleItem.tsx b/src/pages/RulePage/RuleTypeItems/AccountRuleItem.tsx
similarity index 93%
rename from src/react/Pages/RulePage/RuleTypeItems/AccountRuleItem.tsx
rename to src/pages/RulePage/RuleTypeItems/AccountRuleItem.tsx
index 2f4346ef..beb58b6f 100644
--- a/src/react/Pages/RulePage/RuleTypeItems/AccountRuleItem.tsx
+++ b/src/pages/RulePage/RuleTypeItems/AccountRuleItem.tsx
@@ -5,12 +5,12 @@ import FormControl from "@material-ui/core/FormControl";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 
-import { AccountRule } from "../../../Types/Rules/AccountRule";
+import { AccountRule } from "~types/Rules/AccountRule";
 import RuleItemMenu2 from "../RuleItemMenu";
 const RuleItemMenu: any = RuleItemMenu2;
 
-import AccountSelectorDialog from "../../../Components/FormFields/AccountSelectorDialog";
-import TranslateMenuItem2 from "../../../Components/TranslationHelpers/MenuItem";
+import AccountSelectorDialog from "~components/FormFields/AccountSelectorDialog";
+import TranslateMenuItem2 from "~components/TranslationHelpers/MenuItem";
 const TranslateMenuItem: any = TranslateMenuItem2;
 
 interface IPropTypes {
diff --git a/src/react/Pages/RulePage/RuleTypeItems/ItemTypeRuleItem.tsx b/src/pages/RulePage/RuleTypeItems/ItemTypeRuleItem.tsx
similarity index 93%
rename from src/react/Pages/RulePage/RuleTypeItems/ItemTypeRuleItem.tsx
rename to src/pages/RulePage/RuleTypeItems/ItemTypeRuleItem.tsx
index 9af9f60f..8336ca37 100644
--- a/src/react/Pages/RulePage/RuleTypeItems/ItemTypeRuleItem.tsx
+++ b/src/pages/RulePage/RuleTypeItems/ItemTypeRuleItem.tsx
@@ -5,12 +5,12 @@ import FormControl from "@material-ui/core/FormControl";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 
-import TypeRule from "../../../Types/Rules/TypeRule";
+import TypeRule from "~types/Rules/TypeRule";
 import RuleItemMenu2 from "../RuleItemMenu";
 const RuleItemMenu: any = RuleItemMenu2;
 
-import TranslateTypography2 from "../../../Components/TranslationHelpers/Typography";
-import TranslateMenuItem2 from "../../../Components/TranslationHelpers/MenuItem";
+import TranslateTypography2 from "~components/TranslationHelpers/Typography";
+import TranslateMenuItem2 from "~components/TranslationHelpers/MenuItem";
 const TranslateTypography: any = TranslateTypography2;
 const TranslateMenuItem: any = TranslateMenuItem2;
 
diff --git a/src/react/Pages/RulePage/RuleTypeItems/TransactionAmountRuleItem.tsx b/src/pages/RulePage/RuleTypeItems/TransactionAmountRuleItem.tsx
similarity index 91%
rename from src/react/Pages/RulePage/RuleTypeItems/TransactionAmountRuleItem.tsx
rename to src/pages/RulePage/RuleTypeItems/TransactionAmountRuleItem.tsx
index daa33925..c64a55e9 100644
--- a/src/react/Pages/RulePage/RuleTypeItems/TransactionAmountRuleItem.tsx
+++ b/src/pages/RulePage/RuleTypeItems/TransactionAmountRuleItem.tsx
@@ -5,13 +5,13 @@ import FormControl from "@material-ui/core/FormControl";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 
-import MoneyFormatInputDefault from "../../../Components/FormFields/MoneyFormatInputDefault";
-import TransactionAmountRule from "../../../Types/Rules/TransactionAmountRule";
+import MoneyFormatInputDefault from "~components/FormFields/MoneyFormatInputDefault";
+import TransactionAmountRule from "~types/Rules/TransactionAmountRule";
 import RuleItemMenu2 from "../RuleItemMenu";
 const RuleItemMenu: any = RuleItemMenu2;
 
-import TranslateTypography2 from "../../../Components/TranslationHelpers/Typography";
-import TranslateMenuItem2 from "../../../Components/TranslationHelpers/MenuItem";
+import TranslateTypography2 from "~components/TranslationHelpers/Typography";
+import TranslateMenuItem2 from "~components/TranslationHelpers/MenuItem";
 const TranslateTypography: any = TranslateTypography2;
 const TranslateMenuItem: any = TranslateMenuItem2;
 
diff --git a/src/react/Pages/RulePage/RuleTypeItems/ValueRuleItem.tsx b/src/pages/RulePage/RuleTypeItems/ValueRuleItem.tsx
similarity index 97%
rename from src/react/Pages/RulePage/RuleTypeItems/ValueRuleItem.tsx
rename to src/pages/RulePage/RuleTypeItems/ValueRuleItem.tsx
index 56fb8677..235b579f 100644
--- a/src/react/Pages/RulePage/RuleTypeItems/ValueRuleItem.tsx
+++ b/src/pages/RulePage/RuleTypeItems/ValueRuleItem.tsx
@@ -6,11 +6,11 @@ import FormControl from "@material-ui/core/FormControl";
 import TableCell from "@material-ui/core/TableCell";
 import TableRow from "@material-ui/core/TableRow";
 
-import { ValueRule } from "../../../Types/Rules/ValueRule";
+import { ValueRule } from "~types/Rules/ValueRule";
 import RuleItemMenu2 from "../RuleItemMenu";
 const RuleItemMenu: any = RuleItemMenu2;
 
-import TranslateMenuItem2 from "../../../Components/TranslationHelpers/MenuItem";
+import TranslateMenuItem2 from "~components/TranslationHelpers/MenuItem";
 const TranslateMenuItem: any = TranslateMenuItem2;
 
 interface IPropTypes {
diff --git a/src/react/Pages/SavingsGoalPage/SavingsGoalForm.jsx b/src/pages/SavingsGoalPage/SavingsGoalForm.tsx
similarity index 87%
rename from src/react/Pages/SavingsGoalPage/SavingsGoalForm.jsx
rename to src/pages/SavingsGoalPage/SavingsGoalForm.tsx
index 54684456..ceb84863 100644
--- a/src/react/Pages/SavingsGoalPage/SavingsGoalForm.jsx
+++ b/src/pages/SavingsGoalPage/SavingsGoalForm.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 import { Field, reduxForm } from "redux-form";
 import Grid from "@material-ui/core/Grid";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
+import TranslateButton from "~components/TranslationHelpers/Button";
 
-import { required, maxLength, minValue, minArrayLength } from "../../Components/ReduxForm/Validators";
-import renderTextField from "../../Components/ReduxForm/Fields/renderTextField";
-import renderDateTimePicker from "../../Components/ReduxForm/Fields/renderDateTimePicker";
-import renderAmountField from "../../Components/ReduxForm/Fields/renderAmountField";
-import renderAccountsPicker from "../../Components/ReduxForm/Fields/renderAccountsPicker";
-import renderColorPickerGradient from "../../Components/ReduxForm/Fields/renderColorPickerGradient";
+import { required, maxLength, minValue, minArrayLength } from "~components/ReduxForm/Validators";
+import renderTextField from "~components/ReduxForm/Fields/renderTextField";
+import renderDateTimePicker from "~components/ReduxForm/Fields/renderDateTimePicker";
+import renderAmountField from "~components/ReduxForm/Fields/renderAmountField";
+import renderAccountsPicker from "~components/ReduxForm/Fields/renderAccountsPicker";
+import renderColorPickerGradient from "~components/ReduxForm/Fields/renderColorPickerGradient";
 import renderAmountFieldCustom from "./renderAmountFieldCustom";
 
 const styles = {
diff --git a/src/react/Pages/SavingsGoalPage/SavingsGoalPage.jsx b/src/pages/SavingsGoalPage/SavingsGoalPage.tsx
similarity index 91%
rename from src/react/Pages/SavingsGoalPage/SavingsGoalPage.jsx
rename to src/pages/SavingsGoalPage/SavingsGoalPage.tsx
index ce5bc0b4..b362c097 100644
--- a/src/react/Pages/SavingsGoalPage/SavingsGoalPage.jsx
+++ b/src/pages/SavingsGoalPage/SavingsGoalPage.tsx
@@ -12,15 +12,16 @@ import Typography from "@material-ui/core/Typography";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 
 import SavingsGoalForm from "./SavingsGoalForm";
-import ExportDialog from "../../Components/ExportDialog";
-import ImportDialog from "../../Components/ImportDialog";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
-import SavingsGoalListItemWrapper from "../../Components/SavingsGoals/SavingsGoalListItemWrapper";
+import ExportDialog from "~components/ExportDialog";
+import ImportDialog from "~components/ImportDialog";
+import TranslateButton from "~components/TranslationHelpers/Button";
+import SavingsGoalListItemWrapper from "~components/SavingsGoals/SavingsGoalListItemWrapper";
 
-import { openSnackbar } from "../../Actions/snackbar";
-import { setSavingsGoal, removeSavingsGoal } from "../../Actions/savings_goals";
+import { setSavingsGoal, removeSavingsGoal } from "~actions/savings_goals";
 
-import SavingsGoal from "../../Models/SavingsGoal";
+import { actions as snackbarActions } from "~store/snackbar";
+
+import SavingsGoal from "~models/SavingsGoal";
 
 const styles = {
     paper: {
@@ -35,7 +36,9 @@ const styles = {
     }
 };
 
-class SavingsGoalPage extends React.Component {
+class SavingsGoalPage extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -182,7 +185,7 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        openSnackbar: message => dispatch(openSnackbar(message)),
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
         setSavingsGoal: savingsGoal => dispatch(setSavingsGoal(savingsGoal)),
         removeSavingsGoal: savingsGoalId => dispatch(removeSavingsGoal(savingsGoalId))
     };
diff --git a/src/react/Pages/SavingsGoalPage/renderAmountFieldCustom.jsx b/src/pages/SavingsGoalPage/renderAmountFieldCustom.tsx
similarity index 91%
rename from src/react/Pages/SavingsGoalPage/renderAmountFieldCustom.jsx
rename to src/pages/SavingsGoalPage/renderAmountFieldCustom.tsx
index 5216056a..2e6867ba 100644
--- a/src/react/Pages/SavingsGoalPage/renderAmountFieldCustom.jsx
+++ b/src/pages/SavingsGoalPage/renderAmountFieldCustom.tsx
@@ -7,10 +7,10 @@ import FormControl from "@material-ui/core/FormControl";
 
 import ClearIcon from "@material-ui/icons/Clear";
 
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
-import MoneyFormatInput from "../../Components/FormFields/MoneyFormatInput";
-import { calculateTotalBalance } from "../../Components/SavingsGoals/Helpers";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import TranslateButton from "~components/TranslationHelpers/Button";
+import MoneyFormatInput from "~components/FormFields/MoneyFormatInput";
+import { calculateTotalBalance } from "~components/SavingsGoals/Helpers";
 
 const formSelector = formValueSelector("savingsGoal");
 
diff --git a/src/react/Pages/SavingsGoals/SavingsGoals.jsx b/src/pages/SavingsGoals/SavingsGoals.tsx
similarity index 87%
rename from src/react/Pages/SavingsGoals/SavingsGoals.jsx
rename to src/pages/SavingsGoals/SavingsGoals.tsx
index 2e6295f4..3eb0483e 100644
--- a/src/react/Pages/SavingsGoals/SavingsGoals.jsx
+++ b/src/pages/SavingsGoals/SavingsGoals.tsx
@@ -6,20 +6,20 @@ import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
 import Button from "@material-ui/core/Button";
 
-import FileUploadIcon from "../../Components/CustomSVG/FileUpload";
-import FileDownloadIcon from "../../Components/CustomSVG/FileDownload";
+import FileUploadIcon from "~components/CustomSVG/FileUpload";
+import FileDownloadIcon from "~components/CustomSVG/FileDownload";
 import AddIcon from "@material-ui/icons/Add";
 
-import SavingsGoalsList from "../../Components/SavingsGoals/SavingsGoalsList";
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
-import NavLink from "../../Components/Routing/NavLink";
-import ExportDialog from "../../Components/ExportDialog";
-import ImportDialog from "../../Components/ImportDialog";
+import SavingsGoalsList from "~components/SavingsGoals/SavingsGoalsList";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import NavLink from "~components/Routing/NavLink";
+import ExportDialog from "~components/ExportDialog";
+import ImportDialog from "~components/ImportDialog";
 
-import SavingsGoal from "../../Models/SavingsGoal";
+import SavingsGoal from "~models/SavingsGoal";
 
-import { openSnackbar } from "../../Actions/snackbar";
-import { setSavingsGoal } from "../../Actions/savings_goals";
+import { setSavingsGoal } from "~actions/savings_goals";
+import { actions as snackbarActions } from "~store/snackbar";
 
 const styles = {
     paper: {
@@ -33,7 +33,9 @@ const styles = {
     }
 };
 
-class SavingsGoals extends React.Component {
+class SavingsGoals extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -153,7 +155,7 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
     return {
-        openSnackbar: message => dispatch(openSnackbar(message)),
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
         setSavingsGoal: rule_collection => dispatch(setSavingsGoal(rule_collection))
     };
 };
diff --git a/src/react/Pages/ScheduledPayments/ScheduledPaymentItem.jsx b/src/pages/ScheduledPayments/ScheduledPaymentItem.tsx
similarity index 91%
rename from src/react/Pages/ScheduledPayments/ScheduledPaymentItem.jsx
rename to src/pages/ScheduledPayments/ScheduledPaymentItem.tsx
index 61e92b96..e7749d62 100644
--- a/src/react/Pages/ScheduledPayments/ScheduledPaymentItem.jsx
+++ b/src/pages/ScheduledPayments/ScheduledPaymentItem.tsx
@@ -8,11 +8,11 @@ import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 
 import DeleteIcon from "@material-ui/icons/Delete";
 
-import LazyAttachmentImage from "../../Components/AttachmentImage/LazyAttachmentImage";
-import MoneyAmountLabel from "../../Components/MoneyAmountLabel";
+import LazyAttachmentImage from "~components/AttachmentImage/LazyAttachmentImage";
+import MoneyAmountLabel from "~components/MoneyAmountLabel";
 
-import scheduleTexts from "../../Functions/ScheduleTexts";
-import { formatMoney, humanReadableDate } from "../../Functions/Utils";
+import scheduleTexts from "~functions/ScheduleTexts";
+import { formatMoney, humanReadableDate } from "~functions/Utils";
 
 const styles = {
     paper: {
@@ -68,7 +68,7 @@ class ScheduledPaymentItem extends React.Component {
             : scheduleExpiredTranslate;
 
         return (
-            <React.Fragment>
+            <>
                 <ListItem key={key} button onClick={this.props.selectScheduledPayment}>
                     <Avatar style={styles.smallAvatar}>
                         <LazyAttachmentImage height={50} BunqJSClient={BunqJSClient} imageUUID={imageUUID} />
@@ -101,7 +101,7 @@ class ScheduledPaymentItem extends React.Component {
                 </ListItem>
 
                 <Divider />
-            </React.Fragment>
+            </>
         );
     }
 }
diff --git a/src/react/Pages/ScheduledPayments/ScheduledPayments.jsx b/src/pages/ScheduledPayments/ScheduledPayments.tsx
similarity index 94%
rename from src/react/Pages/ScheduledPayments/ScheduledPayments.jsx
rename to src/pages/ScheduledPayments/ScheduledPayments.tsx
index 1e37d7ef..2742a366 100644
--- a/src/react/Pages/ScheduledPayments/ScheduledPayments.jsx
+++ b/src/pages/ScheduledPayments/ScheduledPayments.tsx
@@ -16,13 +16,13 @@ import VisibleIcon from "@material-ui/icons/Visibility";
 
 import ScheduledPaymentItem from "./ScheduledPaymentItem";
 import ScheduledPaymentsEditDialog from "./ScheduledPaymentsEditDialog";
-import AccountList from "../../Components/AccountList/AccountList";
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
+import AccountList from "~components/AccountList/AccountList";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
 
-import { openSnackbar } from "../../Actions/snackbar";
-import { scheduledPaymentsInfoUpdate } from "../../Actions/scheduled_payments";
+import { scheduledPaymentsInfoUpdate } from "~actions/scheduled_payments";
+import { actions as snackbarActions } from "~store/snackbar";
 
-const styles = {
+const styles: any = {
     paper: {
         padding: 24,
         marginBottom: 16
@@ -36,7 +36,9 @@ const styles = {
     }
 };
 
-class ScheduledPayments extends React.Component {
+class ScheduledPayments extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -194,7 +196,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        openSnackbar: message => dispatch(openSnackbar(message)),
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
         scheduledPaymentsInfoUpdate: (userId, accountId) =>
             dispatch(scheduledPaymentsInfoUpdate(BunqJSClient, userId, accountId))
     };
diff --git a/src/react/Pages/ScheduledPayments/ScheduledPaymentsEditDialog.jsx b/src/pages/ScheduledPayments/ScheduledPaymentsEditDialog.tsx
similarity index 95%
rename from src/react/Pages/ScheduledPayments/ScheduledPaymentsEditDialog.jsx
rename to src/pages/ScheduledPayments/ScheduledPaymentsEditDialog.tsx
index 161a5874..70b78dfe 100644
--- a/src/react/Pages/ScheduledPayments/ScheduledPaymentsEditDialog.jsx
+++ b/src/pages/ScheduledPayments/ScheduledPaymentsEditDialog.tsx
@@ -10,12 +10,12 @@ import DialogTitle from "@material-ui/core/DialogTitle";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 
-import TranslateButton from "../../Components/TranslationHelpers/Button";
-import MoneyFormatInput from "../../Components/FormFields/MoneyFormatInput";
-import SchedulePaymentForm from "../../Components/FormFields/SchedulePaymentForm";
-import AttachmentImage from "../../Components/AttachmentImage/AttachmentImage";
+import TranslateButton from "~components/TranslationHelpers/Button";
+import MoneyFormatInput from "~components/FormFields/MoneyFormatInput";
+import SchedulePaymentForm from "~components/FormFields/SchedulePaymentForm";
+import AttachmentImage from "~components/AttachmentImage/AttachmentImage";
 
-import { scheduledPaymentUpdate } from "../../Actions/scheduled_payments";
+import { scheduledPaymentUpdate } from "~actions/scheduled_payments";
 
 const styles = {
     textField: {
diff --git a/src/react/Pages/Settings/EditPasswordForm.jsx b/src/pages/Settings/EditPasswordForm.tsx
similarity index 93%
rename from src/react/Pages/Settings/EditPasswordForm.jsx
rename to src/pages/Settings/EditPasswordForm.tsx
index 73d5fa6f..a128f1aa 100644
--- a/src/react/Pages/Settings/EditPasswordForm.jsx
+++ b/src/pages/Settings/EditPasswordForm.tsx
@@ -4,10 +4,10 @@ import { translate } from "react-i18next";
 import Grid from "@material-ui/core/Grid";
 import TextField from "@material-ui/core/TextField";
 
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
+import TranslateButton from "~components/TranslationHelpers/Button";
 
-import { registrationChangePassword } from "../../Actions/registration";
+import { registrationChangePassword } from "~actions/registration";
 
 const styles = {
     textField: {
diff --git a/src/react/Pages/Settings/Settings.jsx b/src/pages/Settings/Settings.tsx
similarity index 93%
rename from src/react/Pages/Settings/Settings.jsx
rename to src/pages/Settings/Settings.tsx
index 6ed5149f..dafc1705 100644
--- a/src/react/Pages/Settings/Settings.jsx
+++ b/src/pages/Settings/Settings.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
 import Helmet from "react-helmet";
@@ -24,19 +24,19 @@ import LogoutIcon from "@material-ui/icons/ExitToApp";
 import RemoveIcon from "@material-ui/icons/Delete";
 import HomeIcon from "@material-ui/icons/Home";
 
-import path from "../../ImportWrappers/path";
-import { getPrettyLanguage } from "../../Functions/Utils";
+import path from "~importwrappers/path";
+import { getPrettyLanguage } from "~functions/Utils";
 
 const packageInfo = require("../../../../package.json");
 const SUPPORTED_LANGUAGES = packageInfo.supported_languages;
 
 import EditPasswordForm from "./EditPasswordForm";
-import NavLink from "../../Components/Routing/NavLink";
-import FilePicker from "../../Components/FormFields/FilePicker";
-import TranslateButton from "../../Components/TranslationHelpers/Button";
-import TranslateTypography from "../../Components/TranslationHelpers/Typography";
+import NavLink from "~components/Routing/NavLink";
+import FilePicker from "~components/FormFields/FilePicker";
+import TranslateButton from "~components/TranslationHelpers/Button";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
 
-import { openSnackbar } from "../../Actions/snackbar";
+import { actions as snackbarActions } from "~store/snackbar";
 import {
     resetApplication,
     setSyncOnStartup,
@@ -57,17 +57,17 @@ import {
     setAnalyticsEnabled,
     toggleAutomaticUpdatesSendNotification,
     setEventCountLimit
-} from "../../Actions/options";
-import { registrationClearPrivateData, registrationLogOut } from "../../Actions/registration";
-import { paymentsClear } from "../../Actions/payments";
-import { masterCardActionsClear } from "../../Actions/master_card_actions";
-import { bunqMeTabsClear } from "../../Actions/bunq_me_tabs";
-import { scheduledPaymentsClear } from "../../Actions/scheduled_payments";
-import { requestInquiryBatchesClear } from "../../Actions/request_inquiry_batches";
-import { requestResponsesClear } from "../../Actions/request_responses";
-import { requestInquiriesClear } from "../../Actions/request_inquiries";
-import { shareInviteBankInquiriesClear } from "../../Actions/share_invite_monetary_account_inquiries";
-import { shareInviteMonetaryAccountResponsesClear } from "../../Actions/share_invite_monetary_account_responses";
+} from "~actions/options";
+import { registrationClearPrivateData, registrationLogOut } from "~actions/registration";
+import { paymentsClear } from "~actions/payments";
+import { masterCardActionsClear } from "~actions/master_card_actions";
+import { actions as bunqMeTabsActions } from "~store/bunqMeTabs";
+import { scheduledPaymentsClear } from "~actions/scheduled_payments";
+import { requestInquiryBatchesClear } from "~actions/request_inquiry_batches";
+import { requestResponsesClear } from "~actions/request_responses";
+import { requestInquiriesClear } from "~actions/request_inquiries";
+import { shareInviteBankInquiriesClear } from "~actions/share_invite_monetary_account_inquiries";
+import { shareInviteMonetaryAccountResponsesClear } from "~actions/share_invite_monetary_account_responses";
 
 const styles = {
     sideButton: {
@@ -101,7 +101,9 @@ const humanReadableThemes = {
     DarkTheme: "Dark theme"
 };
 
-class Settings extends React.Component {
+class Settings extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -216,16 +218,16 @@ class Settings extends React.Component {
         });
     };
 
-    resetRequestData = e => {
+    resetRequestData = () => {
         this.props.requestInquiriesClear();
         this.props.requestResponsesClear();
         this.props.requestInquiryBatchesClear();
     };
-    requestConnectData = e => {
+    requestConnectData = () => {
         this.props.shareInviteBankInquiriesClear();
         this.props.shareInviteMonetaryAccountResponsesClear();
     };
-    resetAllEventData = e => {
+    resetAllEventData = () => {
         this.props.paymentsClear();
         this.props.masterCardActionsClear();
         this.props.bunqMeTabsClear();
@@ -249,13 +251,13 @@ class Settings extends React.Component {
                 </Grid>
 
                 <Grid item xs={6} md={3} lg={2}>
-                    <Button variant="outlined" color="secondary" style={styles.button} onClick={this.clearPrivateData}>
+                    <Button variant="outlined" color="secondary" style={styles.button as CSSProperties} onClick={this.clearPrivateData}>
                         {t("Remove keys")} <RemoveIcon />
                     </Button>
                 </Grid>
 
                 <Grid item xs={6} md={3} lg={2}>
-                    <Button variant="outlined" color="primary" style={styles.button} onClick={this.logout}>
+                    <Button variant="outlined" color="primary" style={styles.button as CSSProperties} onClick={this.logout}>
                         {t("Logout")} <LogoutIcon />
                     </Button>
                 </Grid>
@@ -500,7 +502,7 @@ class Settings extends React.Component {
                     <Button
                         variant="outlined"
                         color="secondary"
-                        style={styles.button}
+                        style={styles.button as CSSProperties}
                         onClick={this.handleResetBunqDesktop}
                     >
                         {clearBunqDesktopText}
@@ -580,37 +582,37 @@ class Settings extends React.Component {
                 </Grid>
 
                 <Grid item xs={12} sm={4}>
-                    <Button variant="outlined" style={styles.button} onClick={this.props.paymentsClear}>
+                    <Button variant="outlined" style={styles.button as CSSProperties} onClick={this.props.paymentsClear}>
                         {t("Regular payments")} {paymentCount}
                     </Button>
                 </Grid>
 
                 <Grid item xs={12} sm={4}>
-                    <Button variant="outlined" style={styles.button} onClick={this.props.masterCardActionsClear}>
+                    <Button variant="outlined" style={styles.button as CSSProperties} onClick={this.props.masterCardActionsClear}>
                         {t("Card payments")} {cardPaymentCount}
                     </Button>
                 </Grid>
 
                 <Grid item xs={12} sm={4}>
-                    <Button variant="outlined" style={styles.button} onClick={this.resetRequestData}>
+                    <Button variant="outlined" style={styles.button as CSSProperties} onClick={this.resetRequestData}>
                         {t("Requests")} {requestCount}
                     </Button>
                 </Grid>
 
                 <Grid item xs={12} sm={4}>
-                    <Button variant="outlined" style={styles.button} onClick={this.props.bunqMeTabsClear}>
+                    <Button variant="outlined" style={styles.button as CSSProperties} onClick={this.props.bunqMeTabsClear}>
                         {t("bunqme Tabs")} {bunqMeTabsCount}
                     </Button>
                 </Grid>
 
                 <Grid item xs={12} sm={4}>
-                    <Button variant="outlined" style={styles.button} onClick={this.requestConnectData}>
+                    <Button variant="outlined" style={styles.button as CSSProperties} onClick={this.requestConnectData}>
                         {t("Connect requests")} {connectCount}
                     </Button>
                 </Grid>
 
                 <Grid item xs={12} sm={4}>
-                    <Button variant="outlined" style={styles.button} onClick={this.props.scheduledPaymentsClear}>
+                    <Button variant="outlined" style={styles.button as CSSProperties} onClick={this.props.scheduledPaymentsClear}>
                         {t("Scheduled payments")} {scheduledPaymentsCount}
                     </Button>
                 </Grid>
@@ -710,7 +712,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     return {
         // options and options_drawer handlers
         setSyncOnStartup: syncOnStartup => dispatch(setSyncOnStartup(syncOnStartup)),
-        openSnackbar: message => dispatch(openSnackbar(message)),
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
         setAutomaticThemeChange: automaticThemeChange => dispatch(setAutomaticThemeChange(automaticThemeChange)),
         setTheme: theme => dispatch(setTheme(theme)),
         setLanguage: language => dispatch(setLanguage(language)),
@@ -735,7 +737,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
 
         paymentsClear: () => dispatch(paymentsClear()),
         masterCardActionsClear: () => dispatch(masterCardActionsClear()),
-        bunqMeTabsClear: () => dispatch(bunqMeTabsClear()),
+        bunqMeTabsClear: () => dispatch(bunqMeTabsActions.clear()),
         scheduledPaymentsClear: () => dispatch(scheduledPaymentsClear()),
         requestInquiriesClear: () => dispatch(requestInquiriesClear()),
         requestResponsesClear: () => dispatch(requestResponsesClear()),
diff --git a/src/react/Pages/Stats/Chart/PieChart/CategoryCountPieChart.jsx b/src/pages/Stats/Chart/PieChart/CategoryCountPieChart.tsx
similarity index 98%
rename from src/react/Pages/Stats/Chart/PieChart/CategoryCountPieChart.jsx
rename to src/pages/Stats/Chart/PieChart/CategoryCountPieChart.tsx
index 56e20fe7..9118d5de 100644
--- a/src/react/Pages/Stats/Chart/PieChart/CategoryCountPieChart.jsx
+++ b/src/pages/Stats/Chart/PieChart/CategoryCountPieChart.tsx
@@ -47,6 +47,7 @@ export default props => {
 
     return (
         <Pie
+            // @ts-ignore
             style={defaultOptions.style}
             height={defaultOptions.height}
             options={pieChartOptions}
diff --git a/src/react/Pages/Stats/Chart/PieChart/CategoryTransactionPieChart.jsx b/src/pages/Stats/Chart/PieChart/CategoryTransactionPieChart.tsx
similarity index 95%
rename from src/react/Pages/Stats/Chart/PieChart/CategoryTransactionPieChart.jsx
rename to src/pages/Stats/Chart/PieChart/CategoryTransactionPieChart.tsx
index dfb88c93..7a4f891c 100644
--- a/src/react/Pages/Stats/Chart/PieChart/CategoryTransactionPieChart.jsx
+++ b/src/pages/Stats/Chart/PieChart/CategoryTransactionPieChart.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Pie } from "react-chartjs-2";
-import { moneyTemplate } from "../../../../Functions/StatsFormattingTemplates";
+import { moneyTemplate } from "~functions/StatsFormattingTemplates";
 
 const ensurePositive = value => {
     return value < 0 ? value * -1 : value;
@@ -72,6 +72,7 @@ export default props => {
 
     return (
         <Pie
+            // @ts-ignore
             style={defaultOptions.style}
             height={defaultOptions.height}
             options={pieChartOptions}
diff --git a/src/react/Pages/Stats/Chart/PieChart/EventCountPieChart.jsx b/src/pages/Stats/Chart/PieChart/EventCountPieChart.tsx
similarity index 98%
rename from src/react/Pages/Stats/Chart/PieChart/EventCountPieChart.jsx
rename to src/pages/Stats/Chart/PieChart/EventCountPieChart.tsx
index 82279927..7070bd42 100644
--- a/src/react/Pages/Stats/Chart/PieChart/EventCountPieChart.jsx
+++ b/src/pages/Stats/Chart/PieChart/EventCountPieChart.tsx
@@ -57,6 +57,7 @@ export default props => {
 
     return (
         <Pie
+            // @ts-ignore
             style={defaultOptions.style}
             height={defaultOptions.height}
             options={pieChartOptions}
diff --git a/src/react/Pages/Stats/Chart/PieChart/EventSplitCountPieChart.jsx b/src/pages/Stats/Chart/PieChart/EventSplitCountPieChart.tsx
similarity index 99%
rename from src/react/Pages/Stats/Chart/PieChart/EventSplitCountPieChart.jsx
rename to src/pages/Stats/Chart/PieChart/EventSplitCountPieChart.tsx
index 3e45a050..1f474169 100644
--- a/src/react/Pages/Stats/Chart/PieChart/EventSplitCountPieChart.jsx
+++ b/src/pages/Stats/Chart/PieChart/EventSplitCountPieChart.tsx
@@ -79,6 +79,7 @@ export default props => {
 
     return (
         <Pie
+            // @ts-ignore
             style={defaultOptions.style}
             height={defaultOptions.height}
             options={pieChartOptions}
diff --git a/src/react/Pages/Stats/Chart/PieChart/EventSplitTransactionPieChart.jsx b/src/pages/Stats/Chart/PieChart/EventSplitTransactionPieChart.tsx
similarity index 97%
rename from src/react/Pages/Stats/Chart/PieChart/EventSplitTransactionPieChart.jsx
rename to src/pages/Stats/Chart/PieChart/EventSplitTransactionPieChart.tsx
index f896d631..c83f1b73 100644
--- a/src/react/Pages/Stats/Chart/PieChart/EventSplitTransactionPieChart.jsx
+++ b/src/pages/Stats/Chart/PieChart/EventSplitTransactionPieChart.tsx
@@ -9,7 +9,7 @@ import {
     requestResponseColor,
     tapAndPayPaymentColor
 } from "../../Colors";
-import { moneyTemplate } from "../../../../Functions/StatsFormattingTemplates";
+import { moneyTemplate } from "~functions/StatsFormattingTemplates";
 
 const countReducer = (a, b) => a + b;
 
@@ -93,6 +93,7 @@ export default props => {
 
     return (
         <Pie
+            // @ts-ignore
             style={defaultOptions.style}
             height={defaultOptions.height}
             options={pieChartOptions}
diff --git a/src/react/Pages/Stats/Chart/PieChart/EventTransactionPieChart.jsx b/src/pages/Stats/Chart/PieChart/EventTransactionPieChart.tsx
similarity index 96%
rename from src/react/Pages/Stats/Chart/PieChart/EventTransactionPieChart.jsx
rename to src/pages/Stats/Chart/PieChart/EventTransactionPieChart.tsx
index 2d6fe937..5fbcf4e6 100644
--- a/src/react/Pages/Stats/Chart/PieChart/EventTransactionPieChart.jsx
+++ b/src/pages/Stats/Chart/PieChart/EventTransactionPieChart.tsx
@@ -7,7 +7,7 @@ import {
     requestInquiryColor,
     requestResponseColor
 } from "../../Colors";
-import { moneyTemplate } from "../../../../Functions/StatsFormattingTemplates";
+import { moneyTemplate } from "~functions/StatsFormattingTemplates";
 
 const countReducer = (a, b) => a + b;
 
@@ -73,6 +73,7 @@ export default props => {
 
     return (
         <Pie
+            // @ts-ignore
             style={defaultOptions.style}
             height={defaultOptions.height}
             options={pieChartOptions}
diff --git a/src/react/Pages/Stats/Chart/Timeline/CategoryCountHistoryChart.jsx b/src/pages/Stats/Chart/Timeline/CategoryCountHistoryChart.tsx
similarity index 96%
rename from src/react/Pages/Stats/Chart/Timeline/CategoryCountHistoryChart.jsx
rename to src/pages/Stats/Chart/Timeline/CategoryCountHistoryChart.tsx
index b3a4f807..ad97da56 100644
--- a/src/react/Pages/Stats/Chart/Timeline/CategoryCountHistoryChart.jsx
+++ b/src/pages/Stats/Chart/Timeline/CategoryCountHistoryChart.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Bar } from "react-chartjs-2";
-import { sortLinearChartTooltips } from "../../../../Functions/StatsFormattingTemplates";
+import { sortLinearChartTooltips } from "~functions/StatsFormattingTemplates";
 
 export default props => {
     const defaultOptions = {
diff --git a/src/react/Pages/Stats/Chart/Timeline/CategoryTransactionHistoryChart.jsx b/src/pages/Stats/Chart/Timeline/CategoryTransactionHistoryChart.tsx
similarity index 96%
rename from src/react/Pages/Stats/Chart/Timeline/CategoryTransactionHistoryChart.jsx
rename to src/pages/Stats/Chart/Timeline/CategoryTransactionHistoryChart.tsx
index b561f520..2baadf27 100644
--- a/src/react/Pages/Stats/Chart/Timeline/CategoryTransactionHistoryChart.jsx
+++ b/src/pages/Stats/Chart/Timeline/CategoryTransactionHistoryChart.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Bar } from "react-chartjs-2";
-import { moneyTemplate, sortLinearChartTooltips } from "../../../../Functions/StatsFormattingTemplates";
+import { moneyTemplate, sortLinearChartTooltips } from "~functions/StatsFormattingTemplates";
 
 export default props => {
     const defaultOptions = {
diff --git a/src/react/Pages/Stats/Chart/Timeline/EventTypeHistoryChart.jsx b/src/pages/Stats/Chart/Timeline/EventTypeHistoryChart.tsx
similarity index 97%
rename from src/react/Pages/Stats/Chart/Timeline/EventTypeHistoryChart.jsx
rename to src/pages/Stats/Chart/Timeline/EventTypeHistoryChart.tsx
index 6707869c..8105f5c1 100644
--- a/src/react/Pages/Stats/Chart/Timeline/EventTypeHistoryChart.jsx
+++ b/src/pages/Stats/Chart/Timeline/EventTypeHistoryChart.tsx
@@ -7,7 +7,7 @@ import {
     requestInquiryColor,
     requestResponseColor
 } from "../../Colors";
-import { sortLinearChartTooltips } from "../../../../Functions/StatsFormattingTemplates";
+import { sortLinearChartTooltips } from "~functions/StatsFormattingTemplates";
 
 export default props => {
     const defaultOptions = {
diff --git a/src/react/Pages/Stats/Chart/Timeline/EventTypeSplitHistoryChart.jsx b/src/pages/Stats/Chart/Timeline/EventTypeSplitHistoryChart.tsx
similarity index 98%
rename from src/react/Pages/Stats/Chart/Timeline/EventTypeSplitHistoryChart.jsx
rename to src/pages/Stats/Chart/Timeline/EventTypeSplitHistoryChart.tsx
index cc2a971c..406b114b 100644
--- a/src/react/Pages/Stats/Chart/Timeline/EventTypeSplitHistoryChart.jsx
+++ b/src/pages/Stats/Chart/Timeline/EventTypeSplitHistoryChart.tsx
@@ -10,7 +10,7 @@ import {
     requestInquiryColor,
     requestResponseColor
 } from "../../Colors";
-import { sortLinearChartTooltips } from "../../../../Functions/StatsFormattingTemplates";
+import { sortLinearChartTooltips } from "~functions/StatsFormattingTemplates";
 
 export default props => {
     const defaultOptions = {
diff --git a/src/react/Pages/Stats/Chart/Timeline/EventTypeSplitTransactionHistoryChart.jsx b/src/pages/Stats/Chart/Timeline/EventTypeSplitTransactionHistoryChart.tsx
similarity index 98%
rename from src/react/Pages/Stats/Chart/Timeline/EventTypeSplitTransactionHistoryChart.jsx
rename to src/pages/Stats/Chart/Timeline/EventTypeSplitTransactionHistoryChart.tsx
index 3a11b0a1..aa96f063 100644
--- a/src/react/Pages/Stats/Chart/Timeline/EventTypeSplitTransactionHistoryChart.jsx
+++ b/src/pages/Stats/Chart/Timeline/EventTypeSplitTransactionHistoryChart.tsx
@@ -10,7 +10,7 @@ import {
     requestInquiryColor,
     requestResponseColor
 } from "../../Colors";
-import { moneyTemplate, sortLinearChartTooltips } from "../../../../Functions/StatsFormattingTemplates";
+import { moneyTemplate, sortLinearChartTooltips } from "~functions/StatsFormattingTemplates";
 
 export default props => {
     const defaultOptions = {
diff --git a/src/react/Pages/Stats/Chart/Timeline/EventTypeTransactionHistoryChart.jsx b/src/pages/Stats/Chart/Timeline/EventTypeTransactionHistoryChart.tsx
similarity index 97%
rename from src/react/Pages/Stats/Chart/Timeline/EventTypeTransactionHistoryChart.jsx
rename to src/pages/Stats/Chart/Timeline/EventTypeTransactionHistoryChart.tsx
index 064b3959..770536d9 100644
--- a/src/react/Pages/Stats/Chart/Timeline/EventTypeTransactionHistoryChart.jsx
+++ b/src/pages/Stats/Chart/Timeline/EventTypeTransactionHistoryChart.tsx
@@ -7,7 +7,7 @@ import {
     requestInquiryColor,
     requestResponseColor
 } from "../../Colors";
-import { moneyTemplate, sortLinearChartTooltips } from "../../../../Functions/StatsFormattingTemplates";
+import { moneyTemplate, sortLinearChartTooltips } from "~functions/StatsFormattingTemplates";
 
 export default props => {
     const defaultOptions = {
diff --git a/src/react/Pages/Stats/ChartTitle.jsx b/src/pages/Stats/ChartTitle.tsx
similarity index 100%
rename from src/react/Pages/Stats/ChartTitle.jsx
rename to src/pages/Stats/ChartTitle.tsx
diff --git a/src/react/Pages/Stats/Colors.jsx b/src/pages/Stats/Colors.tsx
similarity index 100%
rename from src/react/Pages/Stats/Colors.jsx
rename to src/pages/Stats/Colors.tsx
diff --git a/src/react/Pages/Stats/EventCountSection.jsx b/src/pages/Stats/EventCountSection.tsx
similarity index 100%
rename from src/react/Pages/Stats/EventCountSection.jsx
rename to src/pages/Stats/EventCountSection.tsx
diff --git a/src/react/Pages/Stats/EventCountSidebarSection.jsx b/src/pages/Stats/EventCountSidebarSection.tsx
similarity index 97%
rename from src/react/Pages/Stats/EventCountSidebarSection.jsx
rename to src/pages/Stats/EventCountSidebarSection.tsx
index f3161a49..5164bb33 100644
--- a/src/react/Pages/Stats/EventCountSidebarSection.jsx
+++ b/src/pages/Stats/EventCountSidebarSection.tsx
@@ -20,7 +20,7 @@ export default props => {
                     <ListItemText primary={t("Payments")} secondary={props.payments.length} />
                 </ListItem>
                 {splitCardTypes ? (
-                    <React.Fragment>
+                    <>
                         <ListItem>
                             <ListItemText
                                 primary={t("MasterCard payments")}
@@ -45,7 +45,7 @@ export default props => {
                                 secondary={data.applePayPaymentCountHistory.reduce((a, b) => a + b, 0)}
                             />
                         </ListItem>
-                    </React.Fragment>
+                    </>
                 ) : (
                     <ListItem>
                         <ListItemText primary={t("Card payments")} secondary={props.masterCardActions.length} />
diff --git a/src/react/Pages/Stats/EventHistorySection.jsx b/src/pages/Stats/EventHistorySection.tsx
similarity index 100%
rename from src/react/Pages/Stats/EventHistorySection.jsx
rename to src/pages/Stats/EventHistorySection.tsx
diff --git a/src/react/Pages/Stats/Stats.jsx b/src/pages/Stats/Stats.tsx
similarity index 98%
rename from src/react/Pages/Stats/Stats.jsx
rename to src/pages/Stats/Stats.tsx
index 76869677..04501c7f 100644
--- a/src/react/Pages/Stats/Stats.jsx
+++ b/src/pages/Stats/Stats.tsx
@@ -10,9 +10,9 @@ import Radio from "@material-ui/core/Radio";
 import RadioGroup from "@material-ui/core/RadioGroup";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 
-import AccountList from "../../Components/AccountList/AccountList";
-import ClearBtn from "../../Components/FilterComponents/ClearFilter";
-import FilterDrawer from "../../Components/FilterComponents/FilterDrawer";
+import AccountList from "~components/AccountList/AccountList";
+import ClearBtn from "~components/FilterComponents/ClearFilter";
+import FilterDrawer from "~components/FilterComponents/FilterDrawer";
 
 import ChartTitle from "./ChartTitle";
 import EventCountSection from "./EventCountSection";
@@ -22,16 +22,18 @@ import EventHistorySection from "./EventHistorySection";
 import CategoryCountHistoryChart from "./Chart/Timeline/CategoryCountHistoryChart";
 import CategoryTransactionHistoryChart from "./Chart/Timeline/CategoryTransactionHistoryChart";
 
-const StatsWorker = require("worker-loader!../../WebWorkers/stats.worker.js");
+const StatsWorker = require("~webworkers/stats.worker.js");
 
-const styles = {
+const styles: any = {
     sideBarPaper: {
         padding: 16,
         marginBottom: 16
     }
 };
 
-class Stats extends React.Component {
+class Stats extends React.Component<any> {
+    state: any;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
diff --git a/src/react/Pages/SwitchApiKeys.jsx b/src/pages/SwitchApiKeys.tsx
similarity index 97%
rename from src/react/Pages/SwitchApiKeys.jsx
rename to src/pages/SwitchApiKeys.tsx
index e5c66de8..589967ce 100644
--- a/src/react/Pages/SwitchApiKeys.jsx
+++ b/src/pages/SwitchApiKeys.tsx
@@ -16,9 +16,9 @@ import List from "@material-ui/core/List";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import RemoveIcon from "@material-ui/icons/Delete";
 
-import TranslateTypography from "../Components/TranslationHelpers/Typography";
+import TranslateTypography from "~components/TranslationHelpers/Typography";
 
-import { registrationRemoveStoredApiKey, registrationSwitchStoredApiKey } from "../Actions/registration";
+import { registrationRemoveStoredApiKey, registrationSwitchStoredApiKey } from "~actions/registration";
 
 const styles = {
     wrapperContainer: {
diff --git a/src/react/Actions/accounts.js b/src/react/Actions/accounts.js
deleted file mode 100644
index 4c43ec14..00000000
--- a/src/react/Actions/accounts.js
+++ /dev/null
@@ -1,294 +0,0 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import MonetaryAccount from "../Models/MonetaryAccount";
-
-import { openSnackbar } from "./snackbar";
-
-export const STORED_ACCOUNTS = "BUNQDESKTOP_STORED_ACCOUNTS";
-
-export function accountsSetInfo(accounts, BunqJSClient = false) {
-    return {
-        type: "ACCOUNTS_SET_INFO",
-        payload: {
-            accounts: accounts,
-            BunqJSClient
-        }
-    };
-}
-
-export function loadStoredAccounts(BunqJSClient) {
-    return dispatch => {
-        const BunqDesktopClient = window.BunqDesktopClient;
-        BunqDesktopClient.storeDecrypt(STORED_ACCOUNTS)
-            .then(data => {
-                if (data && data.items) {
-                    // turn plain objects back into MonetaryAccount objects
-                    const accountsOld = data.items.map(item => new MonetaryAccount(item));
-                    dispatch(accountsSetInfo(accountsOld, BunqJSClient));
-                }
-            })
-            .catch(error => {});
-    };
-}
-
-export function accountsUpdate(BunqJSClient, userId) {
-    const failedMessage = window.t("We failed to load your monetary accounts");
-
-    return dispatch => {
-        dispatch(accountsLoading());
-        BunqJSClient.api.monetaryAccount
-            .list(userId)
-            .then(accounts => {
-                // turn plain objects into MonetaryAccount objects
-                const accountsNew = accounts.map(item => new MonetaryAccount(item));
-
-                dispatch(accountsSetInfo(accountsNew, BunqJSClient));
-                dispatch(accountsNotLoading());
-            })
-            .catch(error => {
-                dispatch(accountsNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
-            });
-    };
-}
-
-export function createAccount(
-    BunqJSClient,
-    userId,
-    currency,
-    description,
-    dailyLimit,
-    color,
-    savingsGoal = false,
-    accountType = "MonetaryAccountBank"
-) {
-    const failedMessage = window.t("We received the following error while creating your account");
-    const successMessage = window.t("Account created successfully!");
-
-    return dispatch => {
-        dispatch(createAccountLoading());
-
-        let apiPromise;
-        switch (accountType) {
-            case "MonetaryAccountSavings":
-                apiPromise = BunqJSClient.api.monetaryAccountSavings.post(
-                    userId,
-                    currency,
-                    description,
-                    dailyLimit,
-                    color,
-                    savingsGoal
-                );
-                break;
-            case "MonetaryAccountJoint":
-                apiPromise = BunqJSClient.api.monetaryAccountJoint.post(
-                    userId,
-                    currency,
-                    description,
-                    dailyLimit,
-                    color
-                );
-                break;
-            case "MonetaryAccountBank":
-            default:
-                apiPromise = BunqJSClient.api.monetaryAccountBank.post(
-                    userId,
-                    currency,
-                    description,
-                    dailyLimit,
-                    color
-                );
-                break;
-        }
-
-        apiPromise
-            .then(result => {
-                dispatch(openSnackbar(successMessage));
-                dispatch(accountsUpdate(BunqJSClient, userId));
-                dispatch(createAccountNotLoading());
-            })
-            .catch(error => {
-                dispatch(createAccountNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
-            });
-    };
-}
-
-export function accountsUpdateImage(
-    BunqJSClient,
-    userId,
-    accountId,
-    attachmentId,
-    accountType = "MonetaryAccountBank"
-) {
-    const failedMessage = window.t("We received the following error while updating the image for the monetary account");
-    const successMessage = window.t("Image updated successfully!");
-
-    return dispatch => {
-        dispatch(accountsLoading());
-
-        // make the image public
-        BunqJSClient.api.avatar
-            .post(attachmentId)
-            .then(avatarUuid => {
-                const putRequest = {
-                    avatar_uuid: avatarUuid
-                };
-
-                let apiPromise;
-                switch (accountType) {
-                    case "MonetaryAccountSavings":
-                        apiPromise = BunqJSClient.api.monetaryAccountSavings.put(userId, accountId, putRequest);
-                        break;
-                    case "MonetaryAccountJoint":
-                        apiPromise = BunqJSClient.api.monetaryAccountJoint.put(userId, accountId, putRequest);
-                        break;
-                    case "MonetaryAccountBank":
-                    default:
-                        apiPromise = BunqJSClient.api.monetaryAccountBank.put(userId, accountId, putRequest);
-                        break;
-                }
-
-                apiPromise
-                    .then(result => {
-                        dispatch(openSnackbar(successMessage));
-                        dispatch(accountsUpdate(BunqJSClient, userId));
-                        dispatch(accountsNotLoading());
-                    })
-                    .catch(error => {
-                        dispatch(accountsNotLoading());
-                        BunqErrorHandler(dispatch, error, failedMessage);
-                    });
-            })
-            .catch(error => {
-                dispatch(accountsNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
-            });
-    };
-}
-
-export function accountsDeactivate(BunqJSClient, userId, accountId, reason, accountType = "MonetaryAccountBank") {
-    const failedMessage = window.t("We received the following error while deactivating your account");
-    const successMessage = window.t("Account deactivated successfully!");
-
-    return dispatch => {
-        dispatch(updateAccountStatusLoading());
-
-        let apiHandler = null;
-        switch (accountType) {
-            case "MonetaryAccountSavings":
-                apiHandler = BunqJSClient.api.monetaryAccountSavings;
-                break;
-            case "MonetaryAccountJoint":
-                apiHandler = BunqJSClient.api.monetaryAccountJoint;
-                break;
-            case "MonetaryAccountBank":
-            default:
-                apiHandler = BunqJSClient.api.monetaryAccountBank;
-                break;
-        }
-
-        apiHandler
-            .putCancel(userId, accountId, "CANCELLED", "REDEMPTION_VOLUNTARY", reason)
-            .then(result => {
-                dispatch(openSnackbar(successMessage));
-                dispatch(accountsUpdate(BunqJSClient, userId));
-                dispatch(updateAccountStatusNotLoading());
-            })
-            .catch(error => {
-                dispatch(updateAccountStatusNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
-            });
-    };
-}
-
-export function accountsUpdateSettings(
-    BunqJSClient,
-    userId,
-    accountId,
-    monetaryAccountSettings,
-    accountType = "MonetaryAccountBank"
-) {
-    const failedMessage = window.t("We received the following error updating the settings for your account");
-    const successMessage = window.t("Account settings updated successfully!");
-
-    return dispatch => {
-        dispatch(updateAccountStatusLoading());
-
-        let apiHandler = null;
-        switch (accountType) {
-            case "MonetaryAccountSavings":
-                apiHandler = BunqJSClient.api.monetaryAccountSavings;
-                break;
-            case "MonetaryAccountJoint":
-                apiHandler = BunqJSClient.api.monetaryAccountJoint;
-                break;
-            case "MonetaryAccountBank":
-            default:
-                apiHandler = BunqJSClient.api.monetaryAccountBank;
-                break;
-        }
-
-        apiHandler
-            .put(userId, accountId, monetaryAccountSettings)
-            .then(result => {
-                dispatch(openSnackbar(successMessage));
-                dispatch(accountsUpdate(BunqJSClient, userId));
-                dispatch(updateAccountStatusNotLoading());
-            })
-            .catch(error => {
-                dispatch(updateAccountStatusNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
-            });
-    };
-}
-
-export function accountsSelectAccount(account_id) {
-    return {
-        type: "ACCOUNTS_SELECT_ACCOUNT",
-        payload: {
-            selectedAccount: account_id
-        }
-    };
-}
-
-export function accountExcludeFromTotal(accountId) {
-    return {
-        type: "ACCOUNTS_EXCLUDE_FROM_TOTAL",
-        payload: {
-            account_id: accountId
-        }
-    };
-}
-export function accountIncludeInTotal(accountId) {
-    return {
-        type: "ACCOUNTS_INCLUDE_IN_TOTAL",
-        payload: {
-            account_id: accountId
-        }
-    };
-}
-
-export function accountsLoading() {
-    return { type: "ACCOUNTS_IS_LOADING" };
-}
-export function accountsNotLoading() {
-    return { type: "ACCOUNTS_IS_NOT_LOADING" };
-}
-
-export function accountsClear() {
-    return { type: "ACCOUNTS_CLEAR" };
-}
-
-export function createAccountLoading() {
-    return { type: "ACCOUNT_CREATE_IS_LOADING" };
-}
-export function createAccountNotLoading() {
-    return { type: "ACCOUNT_CREATE_IS_NOT_LOADING" };
-}
-
-export function updateAccountStatusLoading() {
-    return { type: "ACCOUNT_STATUS_IS_LOADING" };
-}
-export function updateAccountStatusNotLoading() {
-    return { type: "ACCOUNT_STATUS_IS_NOT_LOADING" };
-}
diff --git a/src/react/Actions/application.js b/src/react/Actions/application.js
deleted file mode 100644
index a88c4ae7..00000000
--- a/src/react/Actions/application.js
+++ /dev/null
@@ -1,41 +0,0 @@
-export function applicationSetStatus(status_message) {
-    return {
-        type: "APPLICATION_SET_STATUS_MESSAGE",
-        payload: {
-            status_message: status_message
-        }
-    };
-}
-
-export function applicationSetOffline() {
-    return {
-        type: "APPLICATION_SET_OFFLINE"
-    };
-}
-
-export function applicationSetOnline() {
-    return {
-        type: "APPLICATION_SET_ONLINE"
-    };
-}
-
-export function applicationSetLastAutoUpdate() {
-    return {
-        type: "APPLICATION_SET_LAST_AUTO_UPDATE"
-    };
-}
-
-export function applicationForceUpdate() {
-    return {
-        type: "APPLICATION_FORCE_UPDATE"
-    };
-}
-
-export function applicationSetPDFMode(enabled = false) {
-    return {
-        type: "APPLICATION_SET_PDF_MODE",
-        payload: {
-            enabled: enabled
-        }
-    };
-}
diff --git a/src/react/Actions/bunq_me_tab.js b/src/react/Actions/bunq_me_tab.js
deleted file mode 100644
index 8eb7601e..00000000
--- a/src/react/Actions/bunq_me_tab.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import { openSnackbar } from "./snackbar";
-import { bunqMeTabsUpdate } from "./bunq_me_tabs";
-
-export function bunqMeTabSend(BunqJSClient, userId, accountId, description, amount, options = {}) {
-    const failedMessage = window.t("We received the following error while creating your bunqme request");
-    const successMessage = window.t("bunqme request created successfully!");
-
-    return dispatch => {
-        dispatch(bunqMeTabLoading());
-        BunqJSClient.api.bunqMeTabs
-            .post(userId, accountId, description, amount, options)
-            .then(result => {
-                dispatch(openSnackbar(successMessage));
-                dispatch(bunqMeTabsUpdate(BunqJSClient, userId, parseInt(accountId)));
-                dispatch(bunqMeTabNotLoading());
-            })
-            .catch(error => {
-                dispatch(bunqMeTabNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
-            });
-    };
-}
-
-export function bunqMeTabPut(BunqJSClient, userId, accountId, tabId, status = "CANCELLED") {
-    const failedMessage = window.t("We received the following error while updating your bunqme request");
-    const successMessage = window.t("bunqme request status has been updated successfully!");
-
-    return dispatch => {
-        dispatch(bunqMeTabLoading());
-        BunqJSClient.api.bunqMeTabs
-            .put(userId, accountId, tabId, status)
-            .then(result => {
-                dispatch(openSnackbar(successMessage));
-                dispatch(bunqMeTabsUpdate(BunqJSClient, userId, accountId));
-                dispatch(bunqMeTabNotLoading());
-            })
-            .catch(error => {
-                dispatch(bunqMeTabNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
-            });
-    };
-}
-
-export function bunqMeTabLoading() {
-    return { type: "BUNQ_ME_TAB_IS_LOADING" };
-}
-
-export function bunqMeTabNotLoading() {
-    return { type: "BUNQ_ME_TAB_IS_NOT_LOADING" };
-}
diff --git a/src/react/Actions/bunq_me_tabs.js b/src/react/Actions/bunq_me_tabs.js
deleted file mode 100644
index ce1c89f3..00000000
--- a/src/react/Actions/bunq_me_tabs.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import BunqMeTab from "../Models/BunqMeTab.ts";
-
-export const STORED_BUNQ_ME_TABS = "BUNQDESKTOP_STORED_BUNQ_ME_TABS";
-
-export function bunqMeTabsSetInfo(bunqMeTabs, account_id, resetOldItems = false, BunqJSClient = false) {
-    const type = resetOldItems ? "BUNQ_ME_TABS_SET_INFO" : "BUNQ_ME_TABS_UPDATE_INFO";
-
-    return {
-        type: type,
-        payload: {
-            BunqJSClient,
-            bunqMeTabs,
-            account_id
-        }
-    };
-}
-
-export function loadStoredBunqMeTabs(BunqJSClient) {
-    return dispatch => {
-        dispatch(bunqMeTabsLoading());
-        const BunqDesktopClient = window.BunqDesktopClient;
-        BunqDesktopClient.storeDecrypt(STORED_BUNQ_ME_TABS)
-            .then(data => {
-                if (data && data.items) {
-                    const bunqMeTabsNew = data.items.map(item => new BunqMeTab(item));
-                    dispatch(bunqMeTabsSetInfo(bunqMeTabsNew, data.account_id));
-                }
-
-                dispatch(bunqMeTabsNotLoading());
-            })
-            .catch(error => {
-                dispatch(bunqMeTabsNotLoading());
-            });
-    };
-}
-
-export function bunqMeTabsUpdate(
-    BunqJSClient,
-    user_id,
-    accountId,
-    options = {
-        count: 200,
-        newer_id: false,
-        older_id: false
-    }
-) {
-    const failedMessage = window.t("We failed to load the bunqme requests for this monetary account");
-
-    return dispatch => {
-        dispatch(bunqMeTabsLoading());
-        BunqJSClient.api.bunqMeTabs
-            .list(user_id, accountId, options)
-            .then(bunqMeTabs => {
-                const bunqMeTabsNew = bunqMeTabs.map(item => new BunqMeTab(item));
-                dispatch(bunqMeTabsSetInfo(bunqMeTabsNew, accountId, false, BunqJSClient));
-                dispatch(bunqMeTabsNotLoading());
-            })
-            .catch(error => {
-                dispatch(bunqMeTabsNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
-            });
-    };
-}
-
-export function bunqMeTabsLoading() {
-    return { type: "BUNQ_ME_TABS_IS_LOADING" };
-}
-
-export function bunqMeTabsNotLoading() {
-    return { type: "BUNQ_ME_TABS_IS_NOT_LOADING" };
-}
-
-export function bunqMeTabsClear() {
-    return { type: "BUNQ_ME_TABS_CLEAR" };
-}
diff --git a/src/react/Actions/card_cvc2.js b/src/react/Actions/card_cvc2.js
deleted file mode 100644
index a7a8cd9b..00000000
--- a/src/react/Actions/card_cvc2.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-
-export function cardCvc2SetInfo(cvc2_codes, user_id, card_id) {
-    return {
-        type: "CARD_CVC2_SET_INFO",
-        payload: {
-            cvc2_codes: cvc2_codes,
-            user_id: user_id,
-            card_id: card_id
-        }
-    };
-}
-
-export function cardUpdateCvc2Codes(user_id, card_id) {
-    const failedMessage = window.t("We failed to load the CVC codes");
-
-    return dispatch => {
-        dispatch(cardCvc2Loading());
-        window.BunqDesktopClient.BunqJSClient.api.cardCvc2
-            .list(user_id, card_id)
-            .then(cardsCvc2Codes => {
-                // turn string dates into date objects
-                cardsCvc2Codes = cardsCvc2Codes.map(cardsCvc2Code => {
-                    const cardCvc2Info = cardsCvc2Code.CardGeneratedCvc2;
-                    return {
-                        ...cardCvc2Info,
-                        created: new Date(cardCvc2Info.created),
-                        updated: new Date(cardCvc2Info.updated),
-                        expiry_time: new Date(cardCvc2Info.expiry_time)
-                    };
-                });
-
-                dispatch(cardCvc2SetInfo(cardsCvc2Codes, user_id, card_id));
-                dispatch(cardCvc2NotLoading());
-            })
-            .catch(error => {
-                dispatch(cardCvc2NotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
-            });
-    };
-}
-
-export function cardGenerateCvc2(user_id, card_id, type = "GENERATED") {
-    return dispatch => {
-        dispatch(cardCvc2Loading());
-        window.BunqDesktopClient.BunqJSClient.api.cardCvc2
-            .post(user_id, card_id, type)
-            .then(cardsCvc2Code => {
-                dispatch(cardCvc2SetInfo([cardsCvc2Code.CardGeneratedCvc2], user_id, card_id));
-                dispatch(cardCvc2NotLoading());
-            })
-            .catch(error => {
-                dispatch(cardCvc2NotLoading());
-                BunqErrorHandler(dispatch, error, "We failed to generate a new CVC code");
-            });
-    };
-}
-
-export function cardCvc2Loading() {
-    return { type: "CARD_CVC2_IS_LOADING" };
-}
-
-export function cardCvc2NotLoading() {
-    return { type: "CARD_CVC2_IS_NOT_LOADING" };
-}
-
-export function cardCvc2CodesClear() {
-    return { type: "CARD_CVC2_CLEAR" };
-}
diff --git a/src/react/Actions/cards.js b/src/react/Actions/cards.js
deleted file mode 100644
index 96f28a24..00000000
--- a/src/react/Actions/cards.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import Card from "../Models/Card";
-
-export function cardsSetInfo(cards, user_id) {
-    return {
-        type: "CARDS_SET_INFO",
-        payload: {
-            user_id: user_id,
-            cards: cards
-        }
-    };
-}
-
-export function cardsSetCardOrder(cardOrder) {
-    return {
-        type: "CARDS_SET_CARD_ORDER",
-        payload: {
-            card_order: cardOrder
-        }
-    };
-}
-
-export function cardsUpdate(user_id) {
-    const failedMessage = window.t("We failed to load the cards overview");
-
-    return dispatch => {
-        dispatch(cardsLoading());
-        window.BunqDesktopClient.BunqJSClient.api.card
-            .list(user_id)
-            .then(cards => {
-                const wrappedCards = cards.map(card => new Card(card));
-
-                dispatch(cardsSetInfo(wrappedCards, user_id));
-                dispatch(cardsNotLoading());
-            })
-            .catch(error => {
-                dispatch(cardsNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
-            });
-    };
-}
-
-export function cardsAssignAccounts(user_id, card_id, assignemnts) {
-    const failedMessage = window.t("We failed to assign the accounts to this card");
-
-    return dispatch => {
-        dispatch(cardsLoading());
-        window.BunqDesktopClient.BunqJSClient.api.card
-            .update(user_id, card_id, null, null, null, null, null, null, assignemnts)
-            .then(cards => {
-                dispatch(cardsUpdate(user_id));
-                dispatch(cardsNotLoading());
-            })
-            .catch(error => {
-                dispatch(cardsNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
-            });
-    };
-}
-
-export function cardsLoading() {
-    return { type: "CARDS_IS_LOADING" };
-}
-
-export function cardsNotLoading() {
-    return { type: "CARDS_IS_NOT_LOADING" };
-}
-
-export function cardClear() {
-    return { type: "CARDS_CLEAR" };
-}
diff --git a/src/react/Actions/categories.js b/src/react/Actions/categories.js
deleted file mode 100644
index 1d26b51b..00000000
--- a/src/react/Actions/categories.js
+++ /dev/null
@@ -1,71 +0,0 @@
-export const setCategory = (id = false, label, color, icon, priority = 5, options = {}) => {
-    return {
-        type: "CATEGORIES_SET_CATEGORY",
-        payload: {
-            id: id,
-            label: label,
-            color: color,
-            icon: icon,
-            priority: priority,
-            options: options
-        }
-    };
-};
-
-export const setCategoryConnection = (categoryId, itemType, itemId) => {
-    return {
-        type: "CATEGORIES_SET_CATEGORY_CONNECTION",
-        payload: {
-            category_id: categoryId,
-            item_type: itemType,
-            item_id: itemId
-        }
-    };
-};
-
-export const setCategoryConnectionMultiple = categoryConnections => {
-    return {
-        type: "CATEGORIES_SET_CATEGORY_CONNECTION_MULTIPLE",
-        payload: {
-            category_connections: categoryConnections
-        }
-    };
-};
-
-export const removeCategory = categoryId => {
-    return {
-        type: "CATEGORIES_REMOVE_CATEGORY",
-        payload: {
-            category_id: categoryId
-        }
-    };
-};
-
-export const removeCategoryConnection = (categoryId, itemType = false, itemId = false) => {
-    return {
-        type: "CATEGORIES_REMOVE_CATEGORY_CONNECTION",
-        payload: {
-            category_id: categoryId,
-            item_type: itemType,
-            item_id: itemId
-        }
-    };
-};
-
-export const setCategories = categories => {
-    return {
-        type: "CATEGORIES_SET_CATEGORIES",
-        payload: {
-            categories: categories
-        }
-    };
-};
-
-export const setCategoryConnections = categoryConnections => {
-    return {
-        type: "CATEGORIES_SET_CATEGORY_CONNECTIONS",
-        payload: {
-            category_connections: categoryConnections
-        }
-    };
-};
diff --git a/src/react/Actions/category_rules.ts b/src/react/Actions/category_rules.ts
deleted file mode 100644
index 68469c6b..00000000
--- a/src/react/Actions/category_rules.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import RuleCollection from "../Types/RuleCollection";
-
-import { RuleCollectionList } from "../Types/Types";
-
-export const STORED_CATEGORY_RULES = "BUNQDESKTOP_STORED_CATEGORY_RULES";
-
-export const setCategoryRule = (rule_collection: RuleCollection) => {
-    return {
-        type: "CATEGORY_RULE_SET_CATEGORY_RULE",
-        payload: {
-            rule_collection: rule_collection
-        }
-    };
-};
-
-export const setCategoryRules = (categoryRules: RuleCollectionList) => {
-    return {
-        type: "CATEGORY_RULE_SET_CATEGORY_RULES",
-        payload: {
-            category_rules: categoryRules
-        }
-    };
-};
-
-export const removeCategoryRule = (categoryRuleId: string) => {
-    return {
-        type: "CATEGORY_RULE_REMOVE_CATEGORY_RULE",
-        payload: {
-            category_rule_id: categoryRuleId
-        }
-    };
-};
diff --git a/src/react/Actions/contacts.js b/src/react/Actions/contacts.js
deleted file mode 100644
index ab77c94d..00000000
--- a/src/react/Actions/contacts.js
+++ /dev/null
@@ -1,307 +0,0 @@
-import url from "url";
-import axios from "axios";
-const vcf = require("vcf");
-import Logger from "../Functions/Logger";
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-import { getInternationalFormat } from "../Functions/PhoneLib";
-import fs from "../ImportWrappers/fs";
-
-export const STORED_CONTACTS = "BUNQDESKTOP_STORED_CONTACTS";
-
-export function contactsSetInfoType(contacts, type) {
-    return {
-        type: "CONTACTS_SET_INFO_TYPE",
-        payload: {
-            type: type,
-            contacts: contacts
-        }
-    };
-}
-
-export function contactsSetInfo(contacts, BunqJSClient = false) {
-    return {
-        type: "CONTACTS_SET_INFO",
-        payload: {
-            BunqJSClient,
-            contacts: contacts
-        }
-    };
-}
-
-export function loadStoredContacts() {
-    return dispatch => {
-        const BunqDesktopClient = window.BunqDesktopClient;
-        BunqDesktopClient.storeDecrypt(STORED_CONTACTS)
-            .then(data => {
-                if (data && data.items) {
-                    // turn plain objects into Model objects
-                    dispatch(contactsSetInfo(data.items));
-                }
-            })
-            .catch(error => {});
-    };
-}
-
-export function contactInfoUpdateGoogle(BunqJSClient, accessToken) {
-    const failedMessage = window.t("We failed to load the contacts from your Google account");
-
-    return dispatch => {
-        dispatch(contactsLoading());
-
-        // format the url
-        const contactsUrl = url.format({
-            pathname: "//www.google.com/m8/feeds/contacts/default/full",
-            protocol: "https",
-            query: {
-                alt: "json",
-                "max-results": 10000
-            }
-        });
-
-        axios
-            .get(contactsUrl, {
-                headers: {
-                    "GData-Version": 3.0,
-                    "Content-Type": "application/json",
-                    Authorization: `Bearer ${accessToken}`
-                }
-            })
-            .then(response => {
-                const responseData = response.data;
-
-                const collectedEntries = [];
-
-                // go through all entries
-                if (responseData.feed.entry) {
-                    responseData.feed.entry.map(entry => {
-                        // has email
-
-                        const emails = [];
-                        const phoneNumbers = [];
-                        let displayName = "";
-
-                        // has emails, loop through them
-                        if (entry["gd$email"] && entry["gd$email"].length > 0) {
-                            entry["gd$email"].map(email => {
-                                emails.push(email.address);
-                            });
-                        }
-
-                        // has numbers, loop through them
-                        if (entry["gd$phoneNumber"] && entry["gd$phoneNumber"].length > 0) {
-                            entry["gd$phoneNumber"].map(phoneNumber => {
-                                const inputNumber = phoneNumber["uri"];
-
-                                if (inputNumber) {
-                                    // remove the 'uri:' part from string
-                                    const removedFrontNumber = inputNumber.slice(4, inputNumber.length);
-
-                                    // replace - and spaces from string
-                                    const removedCharsNumber = removedFrontNumber.replace(/[\- ]/g, "");
-
-                                    // add number to the list
-                                    phoneNumbers.push(removedCharsNumber);
-                                }
-                            });
-                        }
-
-                        // has fullname, add it
-                        if (entry["gd$name"] && entry["gd$name"]["gd$fullName"]) {
-                            displayName = entry["gd$name"]["gd$fullName"]["$t"];
-                        }
-
-                        if (emails.length > 0 || phoneNumbers.length > 0) {
-                            collectedEntries.push({
-                                name: displayName,
-                                emails: emails,
-                                phoneNumbers: phoneNumbers
-                            });
-                        }
-                    });
-                }
-
-                // set the contacts
-                dispatch(contactsSetInfoType(collectedEntries, "GoogleContacts"));
-                dispatch(contactsNotLoading());
-            })
-            .catch(error => {
-                BunqErrorHandler(dispatch, error, failedMessage);
-                dispatch(contactsNotLoading());
-            });
-    };
-}
-
-export function contactInfoUpdateOffice365(BunqJSClient, accessToken) {
-    const failedMessage = window.t("We failed to load the contacts from your Google account");
-
-    return dispatch => {
-        dispatch(contactsLoading());
-
-        // format the url
-        const contactsUrl = url.format({
-            pathname: "//outlook.office.com/api/v2.0/me/contacts",
-            protocol: "https",
-            query: {}
-        });
-
-        axios
-            .get(contactsUrl, {
-                headers: {
-                    "Content-Type": "application/json",
-                    Authorization: `Bearer ${accessToken}`
-                }
-            })
-            .then(response => {
-                const responseData = response.data;
-
-                const collectedEntries = [];
-
-                // go through all entries
-                if (responseData.value) {
-                    responseData.value.map(entry => {
-                        // has email
-
-                        const emails = [];
-                        const phoneNumbers = [];
-
-                        // has emails, loop through them
-                        if (entry["EmailAddresses"] && entry["EmailAddresses"].length > 0) {
-                            entry["EmailAddresses"].map(email => {
-                                emails.push(email.Address);
-                            });
-                        }
-
-                        // combine phone numbers received into a single list
-                        let receivedPhoneNumbers = [];
-                        if (entry["BusinessPhones"] && entry["BusinessPhones"].length > 0) {
-                            receivedPhoneNumbers = [...receivedPhoneNumbers, ...entry["BusinessPhones"]];
-                        }
-                        if (entry["HomePhones"] && entry["HomePhones"].length > 0) {
-                            receivedPhoneNumbers = [...receivedPhoneNumbers, ...entry["HomePhones"]];
-                        }
-
-                        receivedPhoneNumbers.map(phoneNumber => {
-                            // format as international
-                            const phoneNumberFormatted = getInternationalFormat(phoneNumber);
-
-                            if (phoneNumberFormatted) {
-                                // add number to the list
-                                phoneNumbers.push(phoneNumberFormatted);
-                            }
-                        });
-
-                        if (emails.length > 0 || phoneNumbers.length > 0) {
-                            collectedEntries.push({
-                                name: entry.DisplayName,
-                                emails: emails,
-                                phoneNumbers: phoneNumbers
-                            });
-                        }
-                    });
-                }
-
-                // set the contacts
-                dispatch(contactsSetInfoType(collectedEntries, "Office365"));
-                dispatch(contactsNotLoading());
-            })
-            .catch(error => {
-                BunqErrorHandler(dispatch, error, failedMessage);
-                dispatch(contactsNotLoading());
-            });
-    };
-}
-
-export function contactInfoUpdateApple(BunqJSClient, files) {
-    const failedMessage = window.t("We failed to load the contacts from the vCard file");
-
-    return dispatch => {
-        dispatch(contactsLoading());
-
-        const content = fs.readFileSync(files[0]);
-
-        let result;
-        try {
-            result = vcf.parse(content.toString());
-        } catch (error) {
-            Logger.error(error.message);
-            dispatch(contactsNotLoading());
-            return;
-        }
-
-        const collectedEntries = [];
-
-        // turn single item into array
-        if (result.data) {
-            result = [result];
-        }
-
-        // go through each result
-        result.forEach(vcardInstance => {
-            let displayName = "";
-            let emails = [];
-            let phoneNumbers = [];
-
-            if (vcardInstance.get("n")) {
-                const nameData = vcardInstance.get("n");
-                const nameParts = nameData.valueOf().split(";");
-                const [familyName, givenName, additionalName, prefix] = nameParts;
-
-                // combine the parts into a single display name
-                displayName = `${prefix} ${givenName} ${additionalName} ${familyName}`.trim();
-            }
-
-            if (vcardInstance.get("tel")) {
-                let phoneData = vcardInstance.get("tel");
-                if (phoneData._data) phoneData = [phoneData];
-
-                phoneData.map(phoneNumber => {
-                    // format as international
-                    const phoneNumberFormatted = getInternationalFormat(phoneNumber.valueOf());
-                    if (phoneNumberFormatted) {
-                        // add number to the list
-                        phoneNumbers.push(phoneNumberFormatted);
-                    }
-                });
-            }
-
-            if (vcardInstance.get("email")) {
-                let emailData = vcardInstance.get("email");
-                if (emailData._data) emailData = [emailData];
-
-                emailData.map(email => {
-                    if (email._data) emails.push(email.valueOf());
-                });
-            }
-
-            if (emails.length > 0 || phoneNumbers.length > 0) {
-                collectedEntries.push({
-                    name: displayName,
-                    emails: emails,
-                    phoneNumbers: phoneNumbers
-                });
-            }
-        });
-
-        // set the contacts
-        dispatch(contactsSetInfoType(collectedEntries, "AppleContacts"));
-        dispatch(contactsNotLoading());
-    };
-}
-
-export function contactsLoading() {
-    return { type: "CONTACTS_IS_LOADING" };
-}
-
-export function contactsNotLoading() {
-    return { type: "CONTACTS_IS_NOT_LOADING" };
-}
-
-export function contactsClear(BunqJSClient, type = false) {
-    return {
-        type: "CONTACTS_CLEAR",
-        payload: {
-            BunqJSClient,
-            type
-        }
-    };
-}
diff --git a/src/react/Actions/export_new.js b/src/react/Actions/export_new.js
deleted file mode 100644
index c070e727..00000000
--- a/src/react/Actions/export_new.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-
-export function exportNew(
-    BunqJSClient,
-    user_id,
-    account_id,
-    statement_format,
-    date_start,
-    date_end,
-    options = {
-        regional_format: "EUROPEAN"
-    }
-) {
-    const failedMessage = window.t("We failed to create the export for this monetary account");
-
-    return dispatch => {
-        dispatch(exportNewLoading());
-
-        BunqJSClient.api.customerStatementExport
-            .post(user_id, account_id, statement_format, date_start, date_end, options)
-            .then(exportCreated => {
-                dispatch(exportNewNotLoading());
-            })
-            .catch(error => {
-                dispatch(exportNewNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
-            });
-    };
-}
-
-export function exportNewLoading() {
-    return { type: "EXPORT_NEW_IS_LOADING" };
-}
-
-export function exportNewNotLoading() {
-    return { type: "EXPORT_NEW_IS_NOT_LOADING" };
-}
diff --git a/src/react/Actions/exports.js b/src/react/Actions/exports.js
deleted file mode 100644
index 6c0f1e5a..00000000
--- a/src/react/Actions/exports.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import BunqErrorHandler from "../Functions/BunqErrorHandler";
-
-export function exportsSetInfo(exports, user_id, account_id) {
-    return {
-        type: "EXPORTS_SET_INFO",
-        payload: {
-            exports,
-            user_id,
-            account_id
-        }
-    };
-}
-
-export function exportInfoUpdate(
-    BunqJSClient,
-    user_id,
-    account_id,
-    options = {
-        count: 200,
-        newer_id: false,
-        older_id: false
-    }
-) {
-    const failedMessage = window.t("We failed to load the exports for this monetary account");
-
-    return dispatch => {
-        dispatch(exportsLoading());
-
-        BunqJSClient.api.customerStatementExport
-            .list(user_id, account_id, options)
-            .then(exports => {
-                dispatch(exportsSetInfo(exports, user_id, account_id));
-                dispatch(exportsNotLoading());
-            })
-            .catch(error => {
-                dispatch(exportsNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
-            });
-    };
-}
-
-export function exportsLoading() {
-    return { type: "EXPORTS_IS_LOADING" };
-}
-
-export function exportsNotLoading() {
-    return { type: "EXPORTS_IS_NOT_LOADING" };
-}
-
-export function exportsClear() {
-    return { type: "EXPORTS_CLEAR" };
-}
diff --git a/src/react/Actions/snackbar.js b/src/react/Actions/snackbar.js
deleted file mode 100644
index 7800e6fc..00000000
--- a/src/react/Actions/snackbar.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export function openSnackbar(message, duration = 4000) {
-    return {
-        type: "SNACKBAR_OPEN",
-        payload: {
-            message: message,
-            duration: duration
-        }
-    };
-}
-export function closeSnackbar() {
-    return {
-        type: "SNACKBAR_CLOSE"
-    };
-}
diff --git a/src/react/Reducers/account_id_filter.js b/src/react/Reducers/account_id_filter.js
deleted file mode 100644
index 83f39e7d..00000000
--- a/src/react/Reducers/account_id_filter.js
+++ /dev/null
@@ -1,47 +0,0 @@
-export const defaultState = {
-    selected_account_ids: [],
-    toggle: false
-};
-
-export default function reducer(state = defaultState, action) {
-    switch (action.type) {
-        case "ACCOUNT_ID_FILTER_ADD":
-            const currentAccountIds = [...state.selected_account_ids];
-
-            // prevent duplicates
-            if (!currentAccountIds.includes(action.payload.account_id)) {
-                currentAccountIds.push(action.payload.account_id);
-            }
-
-            return {
-                ...state,
-                selected_account_ids: currentAccountIds
-            };
-
-        case "ACCOUNT_ID_FILTER_REMOVE":
-            const currentAccountIds2 = [...state.selected_account_ids];
-
-            const removeIndex = currentAccountIds2.findIndex(accountId => accountId === action.payload.account_id);
-            if (removeIndex === -1) return state;
-
-            currentAccountIds2.splice(removeIndex, 1);
-
-            return {
-                ...state,
-                selected_account_ids: currentAccountIds2
-            };
-
-        case "ACCOUNT_ID_FILTER_TOGGLE":
-            return {
-                ...state,
-                toggle: !state.toggle
-            };
-
-        case "ACCOUNT_ID_FILTER_CLEAR":
-        case "GENERAL_FILTER_RESET":
-            return {
-                ...defaultState
-            };
-    }
-    return state;
-}
diff --git a/src/react/Reducers/accounts.js b/src/react/Reducers/accounts.js
deleted file mode 100644
index aae9758c..00000000
--- a/src/react/Reducers/accounts.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import store from "store";
-import { ipcRenderer } from "electron";
-import settings from "../ImportWrappers/electronSettings";
-
-import { STORED_ACCOUNTS } from "../Actions/accounts";
-import { formatMoney } from "../Functions/Utils";
-
-export const SELECTED_ACCOUNT_LOCAION = "BUNQDESKTOP_SELECTED_ACCOUNT";
-export const EXCLUDED_ACCOUNT_IDS = "BUNQDESKTOP_EXCLUDED_ACCOUNT_IDS";
-
-const excludedAccountIdsStored = settings.get(EXCLUDED_ACCOUNT_IDS);
-const selectedAccountStored = store.get(SELECTED_ACCOUNT_LOCAION);
-
-const selectedAccountDefault = selectedAccountStored !== undefined ? selectedAccountStored : false;
-const excludedAccountIdsDefault = excludedAccountIdsStored !== undefined ? excludedAccountIdsStored : [];
-
-export const defaultState = {
-    accounts: [],
-    loading: false,
-    create_loading: false,
-    selected_account: selectedAccountDefault,
-    excluded_account_ids: excludedAccountIdsDefault
-};
-
-export default (state = defaultState, action) => {
-    switch (action.type) {
-        case "ACCOUNTS_SET_INFO":
-            // store the data if we have access to the bunqjsclient
-            if (action.payload.BunqJSClient) {
-                const BunqDesktopClient = window.BunqDesktopClient;
-                BunqDesktopClient.storeEncrypt(
-                    {
-                        items: action.payload.accounts
-                    },
-                    STORED_ACCOUNTS
-                )
-                    .then(() => {})
-                    .catch(() => {});
-            }
-
-            ipcRenderer.send(
-                "set-tray-accounts",
-                action.payload.accounts
-                    .filter(account => {
-                        return account && account.status === "ACTIVE";
-                    })
-                    .map(account => {
-                        return {
-                            description: account.description,
-                            balance: formatMoney(account.getBalance())
-                        };
-                    })
-            );
-
-            return {
-                ...state,
-                accounts: action.payload.accounts
-            };
-
-        case "ACCOUNTS_SELECT_ACCOUNT":
-            store.set(SELECTED_ACCOUNT_LOCAION, action.payload.selectedAccount);
-            return {
-                ...state,
-                selected_account: action.payload.selectedAccount
-            };
-
-        case "ACCOUNTS_EXCLUDE_FROM_TOTAL":
-            const currentAccountIds = [...state.excluded_account_ids];
-            const existingIndex = currentAccountIds.indexOf(action.payload.account_id);
-
-            if (existingIndex === -1) {
-                // doesn't exist, add account id to excluded list
-                currentAccountIds.push(action.payload.account_id);
-
-                // store in settings
-                settings.set(EXCLUDED_ACCOUNT_IDS, currentAccountIds);
-            }
-
-            return {
-                ...state,
-                excluded_account_ids: currentAccountIds
-            };
-        case "ACCOUNTS_INCLUDE_IN_TOTAL":
-            const currentAccountIds2 = [...state.excluded_account_ids];
-            const existingIndex2 = currentAccountIds2.indexOf(action.payload.account_id);
-
-            if (existingIndex2 > -1) {
-                // exists, remove the id from the excluded list
-                currentAccountIds2.splice(existingIndex2, 1);
-
-                // store in settings
-                settings.set(EXCLUDED_ACCOUNT_IDS, currentAccountIds2);
-            }
-
-            return {
-                ...state,
-                excluded_account_ids: currentAccountIds2
-            };
-
-        case "ACCOUNTS_IS_LOADING":
-        case "ACCOUNT_STATUS_IS_LOADING":
-            return {
-                ...state,
-                loading: true
-            };
-
-        case "ACCOUNTS_IS_NOT_LOADING":
-        case "ACCOUNT_STATUS_IS_NOT_LOADING":
-            return {
-                ...state,
-                loading: false
-            };
-
-        case "ACCOUNT_CREATE_IS_LOADING":
-            return {
-                ...state,
-                create_loading: false
-            };
-        case "ACCOUNT_CREATE_IS_NOT_LOADING":
-            return {
-                ...state,
-                create_loading: false
-            };
-
-        case "ACCOUNTS_CLEAR":
-        case "REGISTRATION_CLEAR_PRIVATE_DATA":
-        case "REGISTRATION_LOG_OUT":
-        case "REGISTRATION_CLEAR_USER_INFO":
-            const BunqDesktopClient = window.BunqDesktopClient;
-            BunqDesktopClient.storeRemove(SELECTED_ACCOUNT_LOCAION);
-            BunqDesktopClient.storeRemove(STORED_ACCOUNTS);
-
-            ipcRenderer.send("set-tray-accounts", false);
-            ipcRenderer.send("set-tray-balance", false);
-            return {
-                ...state,
-                accounts: [],
-                selected_account: false,
-                loading: false,
-                create_loading: false
-            };
-    }
-    return state;
-};
diff --git a/src/react/Reducers/amount_filter.js b/src/react/Reducers/amount_filter.js
deleted file mode 100644
index 46294f13..00000000
--- a/src/react/Reducers/amount_filter.js
+++ /dev/null
@@ -1,29 +0,0 @@
-export const defaultState = {
-    amount: "",
-    type: "EQUALS"
-};
-
-export default function reducer(state = defaultState, action) {
-    switch (action.type) {
-        case "AMOUNT_FILTER_SET_AMOUNT":
-            const newAmount = action.payload.amount === "" ? "" : parseFloat(action.payload.amount);
-
-            return {
-                ...state,
-                amount: newAmount
-            };
-
-        case "AMOUNT_FILTER_SET_TYPE":
-            return {
-                ...state,
-                type: action.payload.type
-            };
-
-        case "AMOUNT_FILTER_CLEAR":
-        case "GENERAL_FILTER_RESET":
-            return {
-                ...defaultState
-            };
-    }
-    return state;
-}
diff --git a/src/react/Reducers/application.js b/src/react/Reducers/application.js
deleted file mode 100644
index 09d70feb..00000000
--- a/src/react/Reducers/application.js
+++ /dev/null
@@ -1,45 +0,0 @@
-export const defaultState = {
-    status_message: "",
-    online: true,
-    force_update: false,
-    last_auto_update: false,
-    pdf_save_mode_enabled: false
-};
-
-export default (state = defaultState, action) => {
-    switch (action.type) {
-        case "APPLICATION_SET_STATUS_MESSAGE":
-            return {
-                ...state,
-                status_message: action.payload.status_message
-            };
-        case "APPLICATION_SET_OFFLINE":
-            return {
-                ...state,
-                online: false
-            };
-        case "APPLICATION_SET_ONLINE":
-            return {
-                ...state,
-                online: true
-            };
-        case "APPLICATION_SET_LAST_AUTO_UPDATE":
-            return {
-                ...state,
-                last_auto_update: new Date()
-            };
-        case "APPLICATION_SET_PDF_MODE":
-            return {
-                ...state,
-                pdf_save_mode_enabled: action.payload.enabled
-            };
-
-        // can be used to force an update
-        case "APPLICATION_FORCE_UPDATE":
-            return {
-                ...state,
-                force_update: new Date()
-            };
-    }
-    return state;
-};
diff --git a/src/react/Reducers/bunq_me_tab.js b/src/react/Reducers/bunq_me_tab.js
deleted file mode 100644
index 2ea90d64..00000000
--- a/src/react/Reducers/bunq_me_tab.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export const defaultState = {
-    loading: false
-};
-
-export default function reducer(state = defaultState, action) {
-    switch (action.type) {
-        case "BUNQ_ME_TAB_IS_LOADING":
-            return {
-                ...state,
-                loading: true
-            };
-
-        case "BUNQ_ME_TAB_IS_NOT_LOADING":
-            return {
-                ...state,
-                loading: false
-            };
-    }
-    return state;
-}
diff --git a/src/react/Reducers/bunq_me_tab_filter.js b/src/react/Reducers/bunq_me_tab_filter.js
deleted file mode 100644
index 04714752..00000000
--- a/src/react/Reducers/bunq_me_tab_filter.js
+++ /dev/null
@@ -1,28 +0,0 @@
-export const defaultState = {
-    type: "default",
-    visible: true
-};
-
-export default function reducer(state = defaultState, action) {
-    switch (action.type) {
-        // set a specific filter type
-        case "BUNQ_ME_TAB_FILTER_SET_TYPE":
-            return {
-                ...state,
-                type: action.payload.type
-            };
-
-        case "BUNQ_ME_TAB_FILTER_TOGGLE_VISIBILITY":
-            return {
-                ...state,
-                visible: !state.visible
-            };
-
-        case "BUNQ_ME_TAB_FILTER_CLEAR":
-        case "GENERAL_FILTER_RESET":
-            return {
-                ...defaultState
-            };
-    }
-    return state;
-}
diff --git a/src/react/Reducers/bunq_me_tabs.js b/src/react/Reducers/bunq_me_tabs.js
deleted file mode 100644
index 095314a3..00000000
--- a/src/react/Reducers/bunq_me_tabs.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import store from "store";
-import MergeApiObjects from "../Functions/MergeApiObjects";
-import { storeEncryptString } from "../Functions/Crypto/CryptoWorkerWrapper";
-
-import { STORED_BUNQ_ME_TABS } from "../Actions/bunq_me_tabs";
-
-export const defaultState = {
-    bunq_me_tabs: [],
-    account_id: false,
-    loading: false,
-    newer_ids: [],
-    older_ids: []
-};
-
-export default (state = defaultState, action) => {
-    let bunq_me_tabs = [...state.bunq_me_tabs];
-
-    switch (action.type) {
-        case "BUNQ_ME_TABS_UPDATE_INFO":
-        case "BUNQ_ME_TABS_SET_INFO":
-            // with a set info event or if account id changes we ignore the currently stored items
-            // const ignoreOldItems =
-            //     action.type === "BUNQ_ME_TABS_SET_INFO" ||
-            //     state.account_id !== action.payload.account_id;
-            const ignoreOldItems = false;
-
-            const mergedInfo = MergeApiObjects(
-                action.payload.account_id,
-                action.payload.bunqMeTabs,
-                ignoreOldItems ? [] : bunq_me_tabs
-            );
-
-            // limit payments to 1000 in total
-            const mergedBunqMeTabs = mergedInfo.items.slice(0, 1000);
-
-            // store the data if we have access to the bunqjsclient
-            if (action.payload.BunqJSClient) {
-                const BunqDesktopClient = window.BunqDesktopClient;
-                BunqDesktopClient.storeEncrypt(
-                    {
-                        items: mergedBunqMeTabs,
-                        account_id: action.payload.account_id
-                    },
-                    STORED_BUNQ_ME_TABS
-                )
-                    .then(() => {})
-                    .catch(() => {});
-            }
-
-            // update newer and older id for this monetary account
-            const newerIds = {
-                ...state.newer_ids,
-                [action.payload.account_id]: mergedInfo.newer_id
-            };
-            const olderIds = {
-                ...state.older_ids,
-                [action.payload.account_id]: mergedInfo.older_id
-            };
-
-            return {
-                ...state,
-                bunq_me_tabs: mergedBunqMeTabs,
-                account_id: action.payload.account_id,
-                newer_ids: newerIds,
-                older_ids: olderIds
-            };
-
-        case "BUNQ_ME_TABS_IS_LOADING":
-            return {
-                ...state,
-                loading: true
-            };
-
-        case "BUNQ_ME_TABS_IS_NOT_LOADING":
-            return {
-                ...state,
-                loading: false
-            };
-
-        case "BUNQ_ME_TABS_CLEAR":
-        case "REGISTRATION_LOG_OUT":
-        case "REGISTRATION_CLEAR_PRIVATE_DATA":
-        case "REGISTRATION_CLEAR_USER_INFO":
-            const BunqDesktopClient = window.BunqDesktopClient;
-            BunqDesktopClient.storeRemove(STORED_BUNQ_ME_TABS);
-            return {
-                bunq_me_tabs: [],
-                account_id: false,
-                loading: false
-            };
-    }
-    return state;
-};
diff --git a/src/react/Reducers/card_cvc2.js b/src/react/Reducers/card_cvc2.js
deleted file mode 100644
index 632bbcb2..00000000
--- a/src/react/Reducers/card_cvc2.js
+++ /dev/null
@@ -1,40 +0,0 @@
-export const defaultState = {
-    loading: false,
-    cvc2_codes: [],
-    user_id: false,
-    card_id: false
-};
-
-export default (state = defaultState, action) => {
-    switch (action.type) {
-        case "CARD_CVC2_SET_INFO":
-            return {
-                ...state,
-                card_id: action.payload.card_id,
-                user_id: action.payload.user_id,
-                cvc2_codes: action.payload.cvc2_codes
-            };
-
-        case "CARD_CVC2_IS_LOADING":
-            return {
-                ...state,
-                loading: true
-            };
-
-        case "CARD_CVC2_IS_NOT_LOADING":
-            return {
-                ...state,
-                loading: false
-            };
-
-        case "CARD_CVC2_CLEAR":
-        case "REGISTRATION_LOG_OUT":
-        case "REGISTRATION_CLEAR_PRIVATE_DATA":
-        case "REGISTRATION_CLEAR_USER_INFO":
-            return {
-                ...state,
-                ...defaultState
-            };
-    }
-    return state;
-};
diff --git a/src/react/Reducers/card_id_filter.js b/src/react/Reducers/card_id_filter.js
deleted file mode 100644
index 961d7335..00000000
--- a/src/react/Reducers/card_id_filter.js
+++ /dev/null
@@ -1,47 +0,0 @@
-export const defaultState = {
-    selected_card_ids: [],
-    toggle: false
-};
-
-export default function reducer(state = defaultState, action) {
-    switch (action.type) {
-        case "CARD_ID_FILTER_ADD":
-            const currentCardIds = [...state.selected_card_ids];
-
-            // prevent duplicates
-            if (!currentCardIds.includes(action.payload.card_id)) {
-                currentCardIds.push(action.payload.card_id);
-            }
-
-            return {
-                ...state,
-                selected_card_ids: currentCardIds
-            };
-
-        case "CARD_ID_FILTER_REMOVE":
-            const currentCardIds2 = [...state.selected_card_ids];
-
-            const removeIndex = currentCardIds2.findIndex(cardId => cardId === action.payload.card_id);
-            if (removeIndex === -1) return state;
-
-            currentCardIds2.splice(removeIndex, 1);
-
-            return {
-                ...state,
-                selected_card_ids: currentCardIds2
-            };
-
-        case "CARD_ID_FILTER_TOGGLE":
-            return {
-                ...state,
-                toggle: !state.toggle
-            };
-
-        case "CARD_ID_FILTER_CLEAR":
-        case "GENERAL_FILTER_RESET":
-            return {
-                ...defaultState
-            };
-    }
-    return state;
-}
diff --git a/src/react/Reducers/cards.js b/src/react/Reducers/cards.js
deleted file mode 100644
index f0bc04c1..00000000
--- a/src/react/Reducers/cards.js
+++ /dev/null
@@ -1,65 +0,0 @@
-const store = require("store");
-
-export const CARD_ORDER_LOCATION = "BUNQDESKTOP_CARD_ORDER";
-
-const cardOrderDefault = store.get(CARD_ORDER_LOCATION) !== undefined ? store.get(CARD_ORDER_LOCATION) : [];
-
-export const defaultState = {
-    cards: [],
-    card_order: cardOrderDefault,
-    loading: false
-};
-
-export default (state = defaultState, action) => {
-    switch (action.type) {
-        case "CARDS_SET_INFO":
-            const currentCardOrder = state.card_order ? state.card_order : [];
-            const cardOrder = [...currentCardOrder];
-            const cards = action.payload.cards;
-
-            cards.forEach(card => {
-                const cardId = card.id;
-                if (!cardOrder.includes(cardId)) {
-                    cardOrder.push(cardId);
-                }
-            });
-
-            store.set(CARD_ORDER_LOCATION, cardOrder);
-            return {
-                ...state,
-                cards: cards,
-                card_order: cardOrder
-            };
-
-        case "CARDS_SET_CARD_ORDER":
-            store.set(CARD_ORDER_LOCATION, action.payload.card_order);
-            return {
-                ...state,
-                card_order: action.payload.card_order
-            };
-
-        case "CARDS_IS_LOADING":
-            return {
-                ...state,
-                loading: true
-            };
-
-        case "CARDS_IS_NOT_LOADING":
-            return {
-                ...state,
-                loading: false
-            };
-
-        case "CARDS_CLEAR":
-        case "REGISTRATION_CLEAR_PRIVATE_DATA":
-        case "REGISTRATION_LOG_OUT":
-        case "REGISTRATION_CLEAR_USER_INFO":
-            store.remove(CARD_ORDER_LOCATION);
-            return {
-                cards: [],
-                selectedCard: false,
-                loading: false
-            };
-    }
-    return state;
-};
diff --git a/src/react/Reducers/category_filter.js b/src/react/Reducers/category_filter.js
deleted file mode 100644
index bbee5e6f..00000000
--- a/src/react/Reducers/category_filter.js
+++ /dev/null
@@ -1,42 +0,0 @@
-export const defaultState = {
-    selected_categories: [],
-    toggle: false
-};
-
-export default function reducer(state = defaultState, action) {
-    switch (action.type) {
-        case "CATEGORY_FILTER_ADD_CATEGORY_ID":
-            const currentCategories = [...state.selected_categories];
-
-            // prevent duplicates
-            if (!currentCategories.includes(action.payload.category_id)) {
-                currentCategories.push(action.payload.category_id);
-            }
-
-            return {
-                ...state,
-                selected_categories: currentCategories
-            };
-
-        case "CATEGORY_FILTER_REMOVE_CATEGORY_ID":
-            const currentCategories2 = [...state.selected_categories];
-            currentCategories2.splice(action.payload.index, 1);
-            return {
-                ...state,
-                selected_categories: currentCategories2
-            };
-
-        case "CATEGORY_FILTER_TOGGLE_CATEGORY_ID":
-            return {
-                ...state,
-                toggle: !state.toggle
-            };
-
-        case "CATEGORY_FILTER_CLEAR":
-        case "GENERAL_FILTER_RESET":
-            return {
-                ...defaultState
-            };
-    }
-    return state;
-}
diff --git a/src/react/Reducers/category_rules.ts b/src/react/Reducers/category_rules.ts
deleted file mode 100644
index 24db7371..00000000
--- a/src/react/Reducers/category_rules.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import settings from "../ImportWrappers/electronSettings";
-
-// storage location
-import { STORED_CATEGORY_RULES } from "../Actions/category_rules";
-
-// type checkign imports
-import { RuleCollectionList } from "../Types/Types";
-import RuleCollection from "../Types/RuleCollection";
-
-// default category rules if no previous were found
-const defaultCategoryRules: any[] = require("@bunq-community/bunqdesktop-templates/category-rules.json");
-
-// format the basic default category rules
-const formattedDefaultCategoryRules = {};
-defaultCategoryRules["category-rules"].forEach(defaultCategoryRule => {
-    // turn empty json data into ruleCollection objects
-    const ruleCollection = new RuleCollection();
-    ruleCollection.fromObject(defaultCategoryRule);
-    ruleCollection.ensureId();
-
-    formattedDefaultCategoryRules[ruleCollection.getId()] = ruleCollection;
-});
-
-const categoryRulesStored = settings.get(STORED_CATEGORY_RULES);
-const categoryRulesDefault: RuleCollectionList =
-    categoryRulesStored !== undefined ? categoryRulesStored : formattedDefaultCategoryRules;
-
-// store the default category rules
-if (categoryRulesStored === undefined) {
-    settings.set(STORED_CATEGORY_RULES, formattedDefaultCategoryRules);
-}
-
-// new formatted list
-const formattedCategoryRulesDefault: RuleCollectionList = {};
-Object.keys(categoryRulesDefault).forEach(categoryRuleId => {
-    const ruleCollection: RuleCollection = new RuleCollection();
-
-    // get the json value for this key
-    const ruleObject: any = categoryRulesDefault[categoryRuleId];
-    // load the stored object string into the rule collection
-    ruleCollection.fromObject(ruleObject);
-    // add to the list
-    formattedCategoryRulesDefault[categoryRuleId] = ruleCollection;
-});
-
-// construct the default state
-export const defaultState = {
-    last_update: new Date().getTime(),
-    category_rules: formattedCategoryRulesDefault
-};
-
-export default (state = defaultState, action) => {
-    const category_rules: RuleCollectionList = { ...state.category_rules };
-
-    switch (action.type) {
-        case "CATEGORY_RULE_SET_CATEGORY_RULES":
-            const category_rules_new: RuleCollectionList = action.payload.category_rules;
-
-            // store the category rules
-            settings.set(STORED_CATEGORY_RULES, category_rules_new);
-
-            return {
-                ...state,
-                last_update: new Date().getTime(),
-                category_rules: action.payload.category_rules
-            };
-
-        case "CATEGORY_RULE_SET_CATEGORY_RULE":
-            const rule_collection: RuleCollection = action.payload.rule_collection;
-            const categoryRuleId: string = rule_collection.getId();
-
-            // store this collection in the list or overwrite existing
-            category_rules[categoryRuleId] = rule_collection;
-
-            // store the category rules
-            settings.set(STORED_CATEGORY_RULES, category_rules);
-
-            return {
-                ...state,
-                last_update: new Date().getTime(),
-                category_rules: category_rules
-            };
-
-        case "CATEGORY_RULE_REMOVE_CATEGORY_RULE":
-            const removeCategoryId: string = action.payload.category_rule_id;
-
-            // delete this category from the list
-            if (category_rules[removeCategoryId]) {
-                delete category_rules[removeCategoryId];
-            }
-
-            // store the category rules
-            settings.set(STORED_CATEGORY_RULES, category_rules);
-
-            return {
-                ...state,
-                last_update: new Date().getTime(),
-                category_rules: category_rules
-            };
-
-        // update categories in new settings location
-        case "OPTIONS_OVERWRITE_SETTINGS_LOCATION":
-            settings.set(STORED_CATEGORY_RULES, state.category_rules);
-            return { ...state };
-
-        // load categories from new settings location
-        case "OPTIONS_LOAD_SETTINGS_LOCATION":
-            const storedCategoryRules = settings.get(STORED_CATEGORY_RULES);
-            const parsedStoredList: RuleCollectionList = {};
-
-            if (storedCategoryRules) {
-                Object.keys(storedCategoryRules).forEach(id => {
-                    parsedStoredList[id] = new RuleCollection(storedCategoryRules[id]);
-                });
-            }
-
-            return {
-                ...state,
-                last_update: new Date().getTime(),
-                category_rules: {
-                    ...state.category_rules,
-                    ...parsedStoredList
-                }
-            };
-    }
-    return state;
-};
diff --git a/src/react/Reducers/contacts.js b/src/react/Reducers/contacts.js
deleted file mode 100644
index 3edcce2f..00000000
--- a/src/react/Reducers/contacts.js
+++ /dev/null
@@ -1,152 +0,0 @@
-import { STORED_CONTACTS } from "../Actions/contacts";
-
-export const defaultState = {
-    last_update: new Date().getTime(),
-    contacts: {},
-    loading: false
-};
-
-const uniqueArray = a => {
-    return Array.from(new Set(a));
-};
-
-export default function reducer(state = defaultState, action) {
-    switch (action.type) {
-        case "CONTACTS_SET_INFO_TYPE": {
-            const currentContactState = { ...state.contacts };
-            const contacts = action.payload.contacts;
-            const contactType = action.payload.type;
-
-            const currentContacts = currentContactState[contactType] ? currentContactState[contactType] : [];
-
-            // go through all contacts and combine theme
-            contacts.map(newContact => {
-                let foundExisting = false;
-                currentContacts.map(stateContact => {
-                    if (newContact.name === stateContact.name) {
-                        foundExisting = true;
-                        // combine the lists
-                        stateContact.emails = uniqueArray([...stateContact.emails, ...newContact.emails]);
-                        stateContact.phoneNumbers = uniqueArray([
-                            ...stateContact.phoneNumbers,
-                            ...newContact.phoneNumbers
-                        ]);
-                    }
-                });
-
-                // no existing found so we just push it to the end instead
-                if (foundExisting === false) {
-                    currentContacts.push(newContact);
-                }
-            });
-
-            // sort the contacts
-            const sortedCombinedContacts = currentContacts.sort((a, b) => {
-                if (a.name === "") {
-                    return 1;
-                } else if (b.name === "") {
-                    return -1;
-                }
-
-                return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
-            });
-
-            // set the new combined contacts for this type
-            currentContactState[action.payload.type] = sortedCombinedContacts;
-
-            const BunqDesktopClient = window.BunqDesktopClient;
-            BunqDesktopClient.storeEncrypt(
-                {
-                    items: currentContactState
-                },
-                STORED_CONTACTS
-            )
-                .then(() => {})
-                .catch(() => {});
-
-            return {
-                ...state,
-                last_update: new Date().getTime(),
-                contacts: currentContactState
-            };
-        }
-
-        case "CONTACTS_SET_INFO": {
-            const contacts2 = action.payload.contacts;
-
-            const BunqDesktopClient = window.BunqDesktopClient;
-            BunqDesktopClient.storeEncrypt(
-                {
-                    items: contacts2
-                },
-                STORED_CONTACTS
-            )
-                .then(() => {})
-                .catch(() => {});
-
-            return {
-                ...state,
-                last_update: new Date().getTime(),
-                contacts: contacts2
-            };
-        }
-        case "CONTACTS_IS_LOADING":
-            return {
-                ...state,
-                loading: true
-            };
-        case "CONTACTS_IS_NOT_LOADING":
-            return {
-                ...state,
-                loading: false
-            };
-        case "CONTACTS_CLEAR":
-            let newState = state;
-
-            if (action.payload.type) {
-                // reset this type to empty array
-                newState.contacts[action.payload.type] = [];
-                newState.last_update = new Date().getTime();
-
-                // store the data if we have access to the bunqjsclient
-                if (action.payload.BunqJSClient) {
-                    const BunqDesktopClient = window.BunqDesktopClient;
-                    BunqDesktopClient.storeEncrypt(
-                        {
-                            items: newState.contacts
-                        },
-                        STORED_CONTACTS
-                    )
-                        .then(() => {})
-                        .catch(() => {});
-                }
-            } else {
-                newState = defaultState;
-
-                // remove the data completely
-                if (action.payload.BunqJSClient) {
-                    action.payload.BunqJSClient.Session.asyncStorageRemove(STORED_CONTACTS)
-                        .then(() => {})
-                        .catch(() => {});
-                }
-            }
-
-            return {
-                ...state,
-                ...newState
-            };
-        case "REGISTRATION_CLEAR_PRIVATE_DATA":
-        case "REGISTRATION_LOG_OUT":
-        case "REGISTRATION_CLEAR_USER_INFO":
-            const BunqDesktopClient = window.BunqDesktopClient;
-            BunqDesktopClient.storeRemove(STORED_CONTACTS);
-
-            return {
-                ...state,
-                last_update: new Date().getTime(),
-                contacts: {},
-                loading: false
-            };
-    }
-    return state;
-}
diff --git a/src/react/Reducers/date_filter.js b/src/react/Reducers/date_filter.js
deleted file mode 100644
index 6e7b63e1..00000000
--- a/src/react/Reducers/date_filter.js
+++ /dev/null
@@ -1,36 +0,0 @@
-export const defaultState = {
-    from_date: null,
-    to_date: null
-};
-
-export default function reducer(state = defaultState, action) {
-    switch (action.type) {
-        case "DATE_FILTER_FROM_SET":
-            return {
-                ...state,
-                from_date: action.payload.date
-            };
-        case "DATE_FILTER_TO_SET":
-            return {
-                ...state,
-                to_date: action.payload.date
-            };
-
-        case "DATE_FILTER_FROM_CLEAR":
-            return {
-                ...state,
-                from_date: null
-            };
-        case "DATE_FILTER_TO_CLEAR":
-            return {
-                ...state,
-                to_date: null
-            };
-
-        case "GENERAL_FILTER_RESET":
-            return {
-                ...defaultState
-            };
-    }
-    return state;
-}
diff --git a/src/react/Reducers/export_new.js b/src/react/Reducers/export_new.js
deleted file mode 100644
index 4d9614e1..00000000
--- a/src/react/Reducers/export_new.js
+++ /dev/null
@@ -1,17 +0,0 @@
-export const defaultState = {
-    loading: false
-};
-
-export default function reducer(state = defaultState, action) {
-    switch (action.type) {
-        case "EXPORT_NEW_IS_LOADING":
-            return {
-                loading: true
-            };
-        case "EXPORT_NEW_IS_NOT_LOADING":
-            return {
-                loading: false
-            };
-    }
-    return state;
-}
diff --git a/src/react/Reducers/exports.js b/src/react/Reducers/exports.js
deleted file mode 100644
index c2ca9902..00000000
--- a/src/react/Reducers/exports.js
+++ /dev/null
@@ -1,39 +0,0 @@
-export const defaultState = {
-    exports: [],
-    user_id: false,
-    account_id: false,
-    loading: false
-};
-
-export default (state = defaultState, action) => {
-    switch (action.type) {
-        case "EXPORTS_SET_INFO":
-            return {
-                ...state,
-                exports: action.payload.exports,
-                user_id: action.payload.user_id,
-                account_id: action.payload.account_id
-            };
-
-        case "EXPORTS_IS_LOADING":
-            return {
-                ...state,
-                loading: true
-            };
-
-        case "EXPORTS_IS_NOT_LOADING":
-            return {
-                ...state,
-                loading: false
-            };
-
-        case "EXPORTS_CLEAR":
-        case "REGISTRATION_CLEAR_PRIVATE_DATA":
-        case "REGISTRATION_LOG_OUT":
-        case "REGISTRATION_CLEAR_USER_INFO":
-            return {
-                ...defaultState
-            };
-    }
-    return state;
-};
diff --git a/src/react/Reducers/snackbar.js b/src/react/Reducers/snackbar.js
deleted file mode 100644
index 18a6c931..00000000
--- a/src/react/Reducers/snackbar.js
+++ /dev/null
@@ -1,24 +0,0 @@
-export const defaultState = {
-    message: "",
-    duration: 4000,
-    snackbarOpen: false
-};
-
-export default function reducer(state = defaultState, action) {
-    switch (action.type) {
-        case "SNACKBAR_OPEN":
-            return {
-                ...state,
-                snackbarOpen: true,
-                message: action.payload.message,
-                duration: action.payload.duration
-            };
-
-        case "SNACKBAR_CLOSE":
-            return {
-                ...state,
-                ...defaultState
-            };
-    }
-    return state;
-}
diff --git a/src/react/Store.jsx b/src/react/Store.jsx
deleted file mode 100644
index 6321c704..00000000
--- a/src/react/Store.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { applyMiddleware, createStore, compose } from "redux";
-import thunk from "redux-thunk";
-// fetch all reducers as a bundle
-import reducer from "./Reducers/index.js";
-
-// create the middleware for this store
-let middleware;
-if (process.env.DEVELOPMENT === true) {
-  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-  middleware = composeEnhancers(applyMiddleware(thunk));
-} else {
-  // default middleware
-  middleware = compose(applyMiddleware(thunk));
-}
-
-//return the store
-export default (initialValues = {}) => {
-  return createStore(reducer, initialValues, middleware);
-};
diff --git a/src/react/StaticData/CountryCodes.json b/src/staticdata/CountryCodes.json
similarity index 100%
rename from src/react/StaticData/CountryCodes.json
rename to src/staticdata/CountryCodes.json
diff --git a/src/react/StaticData/Icons.json b/src/staticdata/Icons.json
similarity index 100%
rename from src/react/StaticData/Icons.json
rename to src/staticdata/Icons.json
diff --git a/src/store/accountIdFilter/index.ts b/src/store/accountIdFilter/index.ts
new file mode 100644
index 00000000..9b291bd8
--- /dev/null
+++ b/src/store/accountIdFilter/index.ts
@@ -0,0 +1,50 @@
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+const addAction = createAction("add");
+const removeAction = createAction("remove");
+const toggleAction = createAction("toggle");
+const clearAction = createAction("clear");
+
+export interface IAccountIdFilterState {
+    selectedAccountIds: Array<number>;
+    toggle: boolean;
+}
+
+const initialState: IAccountIdFilterState = {
+    selectedAccountIds: [],
+    toggle: false,
+};
+
+const slice = createSlice({
+    name: "accountIdFilter",
+    initialState,
+    reducers: {
+        [addAction.type](state, action: PayloadAction<number>) {
+            // prevent duplicates
+            if (!state.selectedAccountIds.includes(action.payload)) {
+                state.selectedAccountIds.push(action.payload);
+            }
+        },
+        [removeAction.type](state, action: PayloadAction<number>) {
+            const removeIndex = state.selectedAccountIds.findIndex(accountId => accountId === action.payload);
+            if (removeIndex === -1) {
+                return;
+            }
+
+            state.selectedAccountIds.splice(removeIndex, 1);
+        },
+        [toggleAction.type](state) {
+            state.toggle = !state.toggle;
+        },
+        [clearAction.type]() {
+            return initialState;
+        },
+        ["GENERAL_FILTER_RESET"]() {
+            // TODO: turn into a saga subscriber
+            return initialState;
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/accounts/index.ts b/src/store/accounts/index.ts
new file mode 100644
index 00000000..126f9590
--- /dev/null
+++ b/src/store/accounts/index.ts
@@ -0,0 +1,160 @@
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { ipcRenderer } from "electron";
+import store from "store";
+
+import { EXCLUDED_ACCOUNT_IDS, SELECTED_ACCOUNT_LOCATION, STORED_ACCOUNTS } from "~misc/consts";
+import BunqDesktopClient from "~components/BunqDesktopClient";
+import { formatMoney } from "~functions/Utils";
+import settings from "~importwrappers/electronSettings";
+
+declare let window: Window & { BunqDesktopClient: BunqDesktopClient };
+
+const excludedAccountIdsStored = settings.get(EXCLUDED_ACCOUNT_IDS);
+const selectedAccountStored = store.get(SELECTED_ACCOUNT_LOCATION);
+
+const selectedAccountDefault: number | boolean = selectedAccountStored !== undefined ? selectedAccountStored : false;
+const excludedAccountIdsDefault: Array<number> = excludedAccountIdsStored !== undefined ? excludedAccountIdsStored : [];
+
+export interface ISetInfoPayload {
+    accounts: any;
+    BunqJSClient: boolean;
+}
+
+const setInfoAction = createAction("setInfo");
+const selectAccountAction = createAction("selectAccount");
+const includeInTotalAction = createAction("includeInTotal");
+const excludeFromTotalAction = createAction("excludeFromTotal");
+const isLoadingAction = createAction("isLoading");
+const isNotLoadingAction = createAction("isNotLoading");
+const clearAction = createAction("clear");
+const createAccountLoadingAction = createAction("createAccountLoading");
+const createAccountNotLoadingAction = createAction("createAccountNotLoading");
+const updateAccountStatusLoadingAction = createAction("updateAccountStatusLoading");
+const updateAccountStatusNotLoadingAction = createAction("updateAccountStatusNotLoading");
+
+// TODO: remove this dependency
+function pleaseTurnThisClearFunctionIntoASagaSubscriber(state: IAccountsState) {
+    const BunqDesktopClient = window.BunqDesktopClient;
+    BunqDesktopClient.storeRemove(SELECTED_ACCOUNT_LOCATION);
+    BunqDesktopClient.storeRemove(STORED_ACCOUNTS);
+
+    ipcRenderer.send("set-tray-accounts", false);
+    ipcRenderer.send("set-tray-balance", false);
+
+    state.accounts = [];
+    state.selectedAccount = false;
+    state.loading = false;
+    state.createLoading = false;
+}
+
+export interface IAccountsState {
+    accounts: Array<number>;
+    loading: boolean;
+    createLoading: boolean;
+    selectedAccount: number | boolean;
+    excludedAccountIds: Array<number>;
+}
+
+const initialState = {
+    accounts: [],
+    loading: false,
+    createLoading: false,
+    selectedAccount: selectedAccountDefault,
+    excludedAccountIds: excludedAccountIdsDefault,
+};
+
+const slice = createSlice({
+    name: "actions",
+    initialState,
+    reducers: {
+        [setInfoAction.type](state, action: PayloadAction<ISetInfoPayload>) {
+            // store the data if we have access to the bunqjsclient
+            if (action.payload.BunqJSClient) {
+                const BunqDesktopClient = window.BunqDesktopClient;
+                BunqDesktopClient.storeEncrypt(
+                    {
+                        items: action.payload.accounts
+                    },
+                    STORED_ACCOUNTS
+                )
+                    .then(() => {
+                    })
+                    .catch(() => {
+                    });
+            }
+
+            ipcRenderer.send(
+                "set-tray-accounts",
+                action.payload.accounts
+                    .filter(account => {
+                        return account && account.status === "ACTIVE";
+                    })
+                    .map(account => {
+                        return {
+                            description: account.description,
+                            balance: formatMoney(account.getBalance())
+                        };
+                    })
+            );
+
+            state.accounts = action.payload.accounts;
+        },
+        [selectAccountAction.type](state, action: PayloadAction<number>) {
+            store.set(SELECTED_ACCOUNT_LOCATION, action.payload);
+
+            state.selectedAccount = action.payload;
+        },
+        [includeInTotalAction.type](state, action: PayloadAction<number>) {
+            const currentAccountIds2: number[] = [...state.excludedAccountIds];
+            const existingIndex2 = currentAccountIds2.indexOf(action.payload);
+
+            if (existingIndex2 > -1) {
+                // exists, remove the id from the excluded list
+                currentAccountIds2.splice(existingIndex2, 1);
+
+                // store in settings
+                settings.set(EXCLUDED_ACCOUNT_IDS, currentAccountIds2);
+            }
+
+            state.excludedAccountIds = currentAccountIds2;
+        },
+        [excludeFromTotalAction.type](state, action: PayloadAction<number>) {
+            const currentAccountIds = [...state.excludedAccountIds];
+            const existingIndex = currentAccountIds.indexOf(action.payload);
+
+            if (existingIndex === -1) {
+                // doesn't exist, add account id to excluded list
+                currentAccountIds.push(action.payload);
+
+                // store in settings
+                settings.set(EXCLUDED_ACCOUNT_IDS, currentAccountIds);
+            }
+
+            state.excludedAccountIds = currentAccountIds;
+        },
+        [isLoadingAction.type](state) {
+            state.loading = true;
+        },
+        [isNotLoadingAction.type](state) {
+            state.loading = false;
+        },
+        [clearAction.type](state) {
+            pleaseTurnThisClearFunctionIntoASagaSubscriber(state);
+        },
+        [createAccountLoadingAction.type](state) {
+            pleaseTurnThisClearFunctionIntoASagaSubscriber(state);
+        },
+        [createAccountNotLoadingAction.type](state) {
+            pleaseTurnThisClearFunctionIntoASagaSubscriber(state);
+        },
+        [updateAccountStatusLoadingAction.type](state) {
+            pleaseTurnThisClearFunctionIntoASagaSubscriber(state);
+        },
+        [updateAccountStatusNotLoadingAction.type](state) {
+            pleaseTurnThisClearFunctionIntoASagaSubscriber(state);
+        }
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/accounts/thunks.ts b/src/store/accounts/thunks.ts
new file mode 100644
index 00000000..b90d4995
--- /dev/null
+++ b/src/store/accounts/thunks.ts
@@ -0,0 +1,227 @@
+import { ThunkAction } from "redux-thunk";
+
+import BunqDesktopClient from "~components/BunqDesktopClient";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import MonetaryAccount from "~models/MonetaryAccount";
+import { STORED_ACCOUNTS } from "~misc/consts";
+import { AppDispatch, BatchedActions } from "~store/index";
+import { actions } from "./index";
+import { actions as snackbarActions } from "../snackbar";
+
+declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+
+export function loadStoredAccounts(BunqJSClient) {
+    return async (dispatch) => {
+        const BunqDesktopClient = window.BunqDesktopClient;
+        try {
+            const data = await BunqDesktopClient.storeDecrypt(STORED_ACCOUNTS);
+            if (data && data.items) {
+                // turn plain objects back into MonetaryAccount objects
+                const accountsOld = data.items.map(item => new MonetaryAccount(item));
+                dispatch(actions.setInfo({ accounts: accountsOld, BunqJSClient }));
+            }
+        } catch (e) {
+        }
+    };
+}
+
+export function accountsUpdate(BunqJSClient, userId): ThunkAction<any, any, any, any> {
+    const failedMessage = window.t("We failed to load your monetary accounts");
+
+    return async (dispatch) => {
+        dispatch(actions.isLoading());
+        const batchedActions = [];
+        try {
+            const accounts = await BunqJSClient.api.monetaryAccount.list(userId);
+            // turn plain objects into MonetaryAccount objects
+            const accountsNew = accounts.map(item => new MonetaryAccount(item));
+            batchedActions.push(actions.setInfo({ accounts: accountsNew, BunqJSClient }));
+        } catch (error) {
+            BunqErrorHandler(batchedActions, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([actions.isNotLoading()]));
+        }
+    };
+}
+
+export function createAccount(
+    BunqJSClient,
+    userId,
+    currency,
+    description,
+    dailyLimit,
+    color,
+    savingsGoal = false,
+    accountType = "MonetaryAccountBank"
+) {
+    const failedMessage: string = window.t("We received the following error while creating your account");
+    const successMessage: string = window.t("Account created successfully!");
+
+    return async (dispatch: AppDispatch) => {
+        dispatch(actions.isLoading());
+
+        let apiPromise;
+        switch (accountType) {
+            case "MonetaryAccountSavings":
+                apiPromise = BunqJSClient.api.monetaryAccountSavings.post(
+                    userId,
+                    currency,
+                    description,
+                    dailyLimit,
+                    color,
+                    savingsGoal
+                );
+                break;
+            case "MonetaryAccountJoint":
+                apiPromise = BunqJSClient.api.monetaryAccountJoint.post(
+                    userId,
+                    currency,
+                    description,
+                    dailyLimit,
+                    color
+                );
+                break;
+            case "MonetaryAccountBank":
+            default:
+                apiPromise = BunqJSClient.api.monetaryAccountBank.post(
+                    userId,
+                    currency,
+                    description,
+                    dailyLimit,
+                    color
+                );
+                break;
+        }
+
+        const batchedActions: BatchedActions = [];
+        try {
+            await apiPromise;
+            batchedActions.push(snackbarActions.open({ message: successMessage }));
+            batchedActions.push(accountsUpdate(BunqJSClient, userId));
+        } catch (error) {
+            BunqErrorHandler(batchedActions, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([actions.createAccountNotLoading]));
+        }
+    };
+}
+
+export function accountsUpdateImage(
+    BunqJSClient,
+    userId,
+    accountId,
+    attachmentId,
+    accountType = "MonetaryAccountBank"
+) {
+    const failedMessage = window.t("We received the following error while updating the image for the monetary account");
+    const successMessage = window.t("Image updated successfully!");
+
+    return async (dispatch) => {
+        dispatch(actions.isLoading());
+
+        const batchedActions = [];
+        try {
+            // make the image public
+            const avatarUuid = await BunqJSClient.api.avatar.post(attachmentId);
+            const putRequest = {
+                avatar_uuid: avatarUuid
+            };
+
+            let apiPromise;
+            switch (accountType) {
+                case "MonetaryAccountSavings":
+                    apiPromise = BunqJSClient.api.monetaryAccountSavings.put(userId, accountId, putRequest);
+                    break;
+                case "MonetaryAccountJoint":
+                    apiPromise = BunqJSClient.api.monetaryAccountJoint.put(userId, accountId, putRequest);
+                    break;
+                case "MonetaryAccountBank":
+                default:
+                    apiPromise = BunqJSClient.api.monetaryAccountBank.put(userId, accountId, putRequest);
+                    break;
+            }
+
+            await apiPromise;
+            batchedActions.push(snackbarActions.open(successMessage));
+            batchedActions.push(accountsUpdate(BunqJSClient, userId));
+        } catch (error) {
+            BunqErrorHandler(dispatch, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([actions.isNotLoading]));
+        }
+    };
+}
+
+export function accountsDeactivate(BunqJSClient, userId, accountId, reason, accountType = "MonetaryAccountBank") {
+    const failedMessage = window.t("We received the following error while deactivating your account");
+    const successMessage = window.t("Account deactivated successfully!");
+
+    return async (dispatch) => {
+        dispatch(actions.updateAccountStatusLoading());
+
+        let apiHandler = null;
+        switch (accountType) {
+            case "MonetaryAccountSavings":
+                apiHandler = BunqJSClient.api.monetaryAccountSavings;
+                break;
+            case "MonetaryAccountJoint":
+                apiHandler = BunqJSClient.api.monetaryAccountJoint;
+                break;
+            case "MonetaryAccountBank":
+            default:
+                apiHandler = BunqJSClient.api.monetaryAccountBank;
+                break;
+        }
+
+        const batchedActions = [];
+        try {
+            await apiHandler.putCancel(userId, accountId, "CANCELLED", "REDEMPTION_VOLUNTARY", reason);
+            batchedActions.push(snackbarActions.open({ message: successMessage }));
+            batchedActions.push(accountsUpdate(BunqJSClient, userId));
+        } catch (error) {
+            BunqErrorHandler(dispatch, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([actions.updateAccountStatusNotLoading()]));
+        }
+    };
+}
+
+export function accountsUpdateSettings(
+    BunqJSClient,
+    userId,
+    accountId,
+    monetaryAccountSettings,
+    accountType = "MonetaryAccountBank"
+) {
+    const failedMessage = window.t("We received the following error updating the settings for your account");
+    const successMessage = window.t("Account settings updated successfully!");
+
+    return async (dispatch) => {
+        dispatch(actions.updateAccountStatusLoading());
+
+        let apiHandler = null;
+        switch (accountType) {
+            case "MonetaryAccountSavings":
+                apiHandler = BunqJSClient.api.monetaryAccountSavings;
+                break;
+            case "MonetaryAccountJoint":
+                apiHandler = BunqJSClient.api.monetaryAccountJoint;
+                break;
+            case "MonetaryAccountBank":
+            default:
+                apiHandler = BunqJSClient.api.monetaryAccountBank;
+                break;
+        }
+
+        const batchedActions = [];
+        try {
+            await apiHandler.put(userId, accountId, monetaryAccountSettings);
+            batchedActions.push(snackbarActions.open({ message: successMessage }));
+            batchedActions.push(accountsUpdate(BunqJSClient, userId));
+        } catch (error) {
+            BunqErrorHandler(dispatch, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([actions.updateAccountStatusNotLoading()]))
+        }
+    };
+}
diff --git a/src/store/amountFilter/index.ts b/src/store/amountFilter/index.ts
new file mode 100644
index 00000000..09785e5b
--- /dev/null
+++ b/src/store/amountFilter/index.ts
@@ -0,0 +1,34 @@
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+const setAmountAction = createAction("setAmount", (payload: string) => ({ payload }));
+const setTypeAction = createAction("setType", (payload: string) => ({ payload }));
+const clearAction = createAction("clear", (payload: string) => ({ payload }));
+
+export interface IAmountFilterState {
+    amount: string;
+    type: string;
+}
+
+const initialState: IAmountFilterState = {
+    amount: "",
+    type: "EQUALS"
+};
+
+const slice = createSlice({
+    name: "amountFilter",
+    initialState,
+    reducers: {
+        [setAmountAction.type](state, action: PayloadAction<string>) {
+            state.amount = action.payload;
+        },
+        [setTypeAction.type](state, action: PayloadAction<string>) {
+            state.type = action.payload;
+        },
+        [clearAction.type]() {
+            return initialState;
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/application/index.ts b/src/store/application/index.ts
new file mode 100644
index 00000000..f802bcf0
--- /dev/null
+++ b/src/store/application/index.ts
@@ -0,0 +1,52 @@
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+const setStatusMessageAction = createAction("setStatusMessage");
+const setOnline = createAction("setOnline");
+const setOffline = createAction("setOffline");
+const setLastAutoUpdate = createAction("setLastAutoUpdate");
+const setForceUpdate = createAction("setForceUpdate");
+const setPdfMode = createAction("setPdfMode");
+
+export interface IApplicationState {
+    status_message: string;
+    online: boolean;
+    force_update: number;
+    last_auto_update: number;
+    pdf_save_mode_enabled: boolean;
+}
+
+const initialState: IApplicationState = {
+    status_message: "",
+    online: true,
+    force_update: Date.parse('01 Jan 1970 00:00:00 GMT'),
+    last_auto_update: Date.parse('01 Jan 1970 00:00:00 GMT'),
+    pdf_save_mode_enabled: false,
+};
+
+const slice = createSlice({
+    name: "application",
+    initialState,
+    reducers: {
+        [setStatusMessageAction.type](state, action: PayloadAction<string>) {
+            state.status_message = action.payload;
+        },
+        [setOnline.type](state) {
+            state.online = true;
+        },
+        [setOffline.type](state) {
+            state.online = false;
+        },
+        [setLastAutoUpdate.type](state) {
+            state.last_auto_update = +new Date();
+        },
+        [setForceUpdate.type](state) {
+            state.force_update = +new Date();
+        },
+        [setPdfMode.type](state, action: PayloadAction<boolean>) {
+            state.pdf_save_mode_enabled = action.payload;
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/bunqMeTab/index.ts b/src/store/bunqMeTab/index.ts
new file mode 100644
index 00000000..1dd4e939
--- /dev/null
+++ b/src/store/bunqMeTab/index.ts
@@ -0,0 +1,24 @@
+import { createAction, createSlice } from "@reduxjs/toolkit";
+
+const isLoading = createAction("isLoading");
+const isNotLoading = createAction("isNotLoading");
+
+const initialState = {
+    loading: false,
+};
+
+const slice = createSlice({
+    name: "bunqMeTab",
+    initialState,
+    reducers: {
+        [isLoading.type](state) {
+            state.loading = true;
+        },
+        [isNotLoading.type](state) {
+            state.loading = false;
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/bunqMeTab/thunks.ts b/src/store/bunqMeTab/thunks.ts
new file mode 100644
index 00000000..0ac74bc0
--- /dev/null
+++ b/src/store/bunqMeTab/thunks.ts
@@ -0,0 +1,60 @@
+import BunqJSClient from "@bunq-community/bunq-js-client";
+
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import { actions } from "./index";
+import { actions as bunqMeTabsActions } from "../bunqMeTabs";
+import { actions as snackbarActions } from "../snackbar";
+
+declare let window: Window & { t: Function };
+
+export function bunqMeTabSend(BunqJSClient: BunqJSClient, userId: number, accountId: number, description, amount, options = {}) {
+    const failedMessage: string = window.t("We received the following error while creating your bunqme request");
+    const successMessage: string = window.t("bunqme request created successfully!");
+
+    return async (dispatch) => {
+        dispatch(actions.isLoading());
+
+        const batchedActions = [];
+        try {
+            await BunqJSClient.api.bunqMeTabs.post(userId, accountId, description, amount, options);
+            // TODO: turn into a saga to open the snackbar
+            batchedActions.push(snackbarActions.open({ message: successMessage }));
+            // TODO: turn into a saga listening for updated tabs
+            batchedActions.push(bunqMeTabsActions.setInfo({
+                resetOldItems: false,
+                BunqJSClient: !!BunqJSClient,
+                account_id: accountId.toString(),
+            }));
+        } catch (error) {
+            BunqErrorHandler(batchedActions, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([actions.isNotLoading()]));
+        }
+    };
+}
+
+export function bunqMeTabPut(BunqJSClient: BunqJSClient, userId: number, accountId: number, tabId: number, status = "CANCELLED") {
+    const failedMessage = window.t("We received the following error while updating your bunqme request");
+    const successMessage = window.t("bunqme request status has been updated successfully!");
+
+    return async (dispatch) => {
+        dispatch(actions.isLoading());
+
+        const batchedActions = [];
+        try {
+            await BunqJSClient.api.bunqMeTabs.put(userId, accountId, tabId, status);
+            // TODO: turn into a saga to open the snackbar
+            batchedActions.push(snackbarActions.open({ message: successMessage }));
+            // TODO: move into a saga
+            batchedActions.push(bunqMeTabsActions.setInfo({
+                resetOldItems: false,
+                BunqJSClient: !!BunqJSClient,
+                account_id: accountId.toString(),
+            }));
+        } catch (error) {
+            BunqErrorHandler(dispatch, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([actions.isNotLoading]));
+        }
+    };
+}
diff --git a/src/store/bunqMeTabFilter/index.ts b/src/store/bunqMeTabFilter/index.ts
new file mode 100644
index 00000000..cbfb2a1e
--- /dev/null
+++ b/src/store/bunqMeTabFilter/index.ts
@@ -0,0 +1,38 @@
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+const setType = createAction("setType", (payload: string) => ({ payload }));
+const toggleVisibility = createAction("toggleVisibility");
+const clear = createAction("clear");
+
+export interface IBunqMeTabFilterState {
+    type: string;
+    visible: boolean;
+}
+
+const initialState: IBunqMeTabFilterState = {
+    type: "default",
+    visible: true,
+};
+
+const slice = createSlice({
+    name: "bunqMeTabFilter",
+    initialState,
+    reducers: {
+        [setType.type](state, action: PayloadAction<string>) {
+            state.type = action.payload;
+        },
+        [toggleVisibility.type](state) {
+            state.visible = !state.visible;
+        },
+        [clear.type]() {
+            return initialState;
+        },
+        ["GENERAL_FILTER_RESET"]() {
+            // TODO: turn into a saga subscriber
+            return initialState;
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/bunqMeTabs/index.ts b/src/store/bunqMeTabs/index.ts
new file mode 100644
index 00000000..ddcdf4d8
--- /dev/null
+++ b/src/store/bunqMeTabs/index.ts
@@ -0,0 +1,130 @@
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+import { STORED_BUNQ_ME_TABS } from "~misc/consts";
+import BunqDesktopClient from "~components/BunqDesktopClient";
+import MergeApiObjects from "~functions/MergeApiObjects";
+
+declare let window: Window & { BunqDesktopClient: BunqDesktopClient };
+
+interface ISetInfoPayload {
+    BunqJSClient?: boolean;
+    resetOldItems?: boolean;
+    bunqMeTabs?: any[];
+    account_id: string;
+}
+
+const setInfoAction = createAction("setInfo", (
+    {
+        BunqJSClient = false,
+        resetOldItems = false,
+        bunqMeTabs = [],
+        account_id,
+    }: ISetInfoPayload) => ({ payload: { BunqJSClient, resetOldItems, bunqMeTabs, account_id } }));
+const isLoadingAction = createAction("isLoading");
+const isNotLoadingAction = createAction("isNotLoading");
+const clearAction = createAction("clear");
+
+interface IBunqMeTabsState {
+    bunq_me_tabs: number[];
+    account_id: string;
+    loading: boolean;
+    newer_ids: number[];
+    older_ids: number[];
+}
+
+const initialState: IBunqMeTabsState = {
+    bunq_me_tabs: [],
+    account_id: "",
+    loading: false,
+    newer_ids: [],
+    older_ids: [],
+};
+
+// TODO: remove this dependency
+function pleaseTurnThisClearFunctionIntoASagaSubcriber(state) {
+    const BunqDesktopClient = window.BunqDesktopClient;
+    BunqDesktopClient.storeRemove(STORED_BUNQ_ME_TABS);
+
+    state.bunq_me_tabs = [];
+    state.account_id = false;
+    state.loading = false;
+}
+
+const slice = createSlice({
+    name: "bunqMeTabs",
+    initialState,
+    reducers: {
+        [isLoadingAction.type](state) {
+            state.loading = true;
+        },
+        [isNotLoadingAction.type](state) {
+            state.loading = false;
+        },
+        [setInfoAction.type](state, action: PayloadAction<ISetInfoPayload>) {
+            // with a set info event or if account id changes we ignore the currently stored items
+            // const ignoreOldItems =
+            //     action.type === "BUNQ_ME_TABS_SET_INFO" ||
+            //     state.account_id !== action.payload.account_id;
+            const ignoreOldItems = action.payload.resetOldItems;
+
+            const mergedInfo = MergeApiObjects(
+                action.payload.account_id,
+                action.payload.bunqMeTabs,
+                ignoreOldItems ? [] : state.bunq_me_tabs
+            );
+
+            // limit payments to 1000 in total
+            const mergedBunqMeTabs = mergedInfo.items.slice(0, 1000);
+
+            // store the data if we have access to the bunqjsclient
+            if (action.payload.BunqJSClient) {
+                const BunqDesktopClient = window.BunqDesktopClient;
+                BunqDesktopClient.storeEncrypt(
+                    {
+                        items: mergedBunqMeTabs,
+                        account_id: action.payload.account_id
+                    },
+                    STORED_BUNQ_ME_TABS
+                )
+                    .then(() => {
+                    })
+                    .catch(() => {
+                    });
+            }
+
+            // update newer and older id for this monetary account
+            const newerIds = {
+                ...state.newer_ids,
+                [action.payload.account_id]: mergedInfo.newer_id
+            };
+            const olderIds = {
+                ...state.older_ids,
+                [action.payload.account_id]: mergedInfo.older_id
+            };
+
+            state.bunq_me_tabs = mergedBunqMeTabs;
+            state.account_id = action.payload.account_id;
+            state.newer_ids = newerIds;
+            state.older_ids = olderIds;
+        },
+        ["REGISTRATION_LOG_OUT"](state) {
+            // TODO: turn into a saga subscriber
+            pleaseTurnThisClearFunctionIntoASagaSubcriber(state);
+        },
+        ["REGISTRATION_CLEAR_PRIVATE_DATA"](state) {
+            // TODO: turn into a saga subscriber
+            pleaseTurnThisClearFunctionIntoASagaSubcriber(state);
+        },
+        ["REGISTRATION_CLEAR_USER_INFO"](state) {
+            // TODO: turn into a saga subscriber
+            pleaseTurnThisClearFunctionIntoASagaSubcriber(state);
+        },
+        [clearAction.type](state) {
+            // TODO: turn into a saga subscriber
+            pleaseTurnThisClearFunctionIntoASagaSubcriber(state);
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/bunqMeTabs/thunks.ts b/src/store/bunqMeTabs/thunks.ts
new file mode 100644
index 00000000..4618c18d
--- /dev/null
+++ b/src/store/bunqMeTabs/thunks.ts
@@ -0,0 +1,60 @@
+import { STORED_BUNQ_ME_TABS } from "~misc/consts";
+import BunqDesktopClient from "~components/BunqDesktopClient";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import BunqMeTab from "~models/BunqMeTab";
+import { actions } from "./index";
+
+declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+
+export function loadStoredBunqMeTabs(BunqJSClient) {
+    return async (dispatch) => {
+        dispatch(actions.isLoading());
+        const BunqDesktopClient = window.BunqDesktopClient;
+
+        const batchedActions = [];
+        try {
+            const data = await BunqDesktopClient.storeDecrypt(STORED_BUNQ_ME_TABS);
+            if (data && data.items) {
+                const bunqMeTabsNew = data.items.map(item => new BunqMeTab(item));
+                batchedActions.push(actions.setInfo({ bunqMeTabs: bunqMeTabsNew, account_id: data.account_id }));
+            }
+        } catch (e) {
+        } finally {
+            dispatch(batchedActions.concat([actions.isNotLoading()]));
+        }
+    };
+}
+
+export function bunqMeTabsUpdate(
+    BunqJSClient,
+    user_id,
+    accountId,
+    options = {
+        count: 200,
+        newer_id: false,
+        older_id: false
+    }
+) {
+    const failedMessage = window.t("We failed to load the bunqme requests for this monetary account");
+
+    return async (dispatch) => {
+        dispatch(actions.isLoading());
+
+        const batchedActions = [];
+        try {
+            const bunqMeTabs = await BunqJSClient.api.bunqMeTabs.list(user_id, accountId, options);
+            const bunqMeTabsNew = bunqMeTabs.map(item => new BunqMeTab(item));
+            batchedActions.push(actions.setInfo({
+                bunqMeTabs: bunqMeTabsNew,
+                account_id: accountId,
+                resetOldItems: false,
+                BunqJSClient
+            }));
+            batchedActions.push(actions.isNotLoading());
+        } catch (error) {
+            BunqErrorHandler(dispatch, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([actions.isNotLoading()]));
+        }
+    };
+}
diff --git a/src/store/cardCvc2/index.ts b/src/store/cardCvc2/index.ts
new file mode 100644
index 00000000..15f2b342
--- /dev/null
+++ b/src/store/cardCvc2/index.ts
@@ -0,0 +1,63 @@
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export interface ISetInfoPayload {
+    cvc2_codes: number[];
+    user_id: number;
+    card_id: number;
+}
+
+const setInfoAction = createAction("setInfo");
+const isLoadingAction = createAction("isLoading");
+const isNotLoadingAction = createAction("isNotLoading");
+const clearAction = createAction("clear");
+
+export interface ICardCvc2State {
+    loading: boolean;
+    cvc2_codes: number[];
+    user_id: number | boolean;
+    card_id: number | boolean;
+}
+
+const initialState: ICardCvc2State = {
+    loading: false,
+    cvc2_codes: [],
+    user_id: false,
+    card_id: false
+};
+
+const slice = createSlice({
+    name: "cardCvc2",
+    initialState,
+    reducers: {
+        [setInfoAction.type](state, action: PayloadAction<ISetInfoPayload>) {
+            state.card_id = action.payload.card_id;
+            state.user_id = action.payload.user_id;
+            state.cvc2_codes = action.payload.cvc2_codes;
+        },
+        [isLoadingAction.type](state) {
+            state.loading = true;
+        },
+        [isNotLoadingAction.type](state) {
+            state.loading = false;
+        },
+        [clearAction.type]() {
+            // TODO: turn into saga subscriber
+            return initialState;
+        },
+        ["REGISTRATION_LOG_OUT"]() {
+            // TODO: turn into saga subscriber
+            return initialState;
+        },
+        ["REGISTRATION_CLEAR_PRIVATE_DATA"]() {
+            // TODO: turn into saga subscriber
+            return initialState;
+        },
+        ["REGISTRATION_CLEAR_USER_INFO"]() {
+            // TODO: turn into saga subscriber
+            return initialState;
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/cardCvc2/thunks.ts b/src/store/cardCvc2/thunks.ts
new file mode 100644
index 00000000..4fe903e5
--- /dev/null
+++ b/src/store/cardCvc2/thunks.ts
@@ -0,0 +1,50 @@
+import BunqDesktopClient from "~components/BunqDesktopClient";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import { actions } from "./index";
+
+declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+
+export function cardUpdateCvc2Codes(user_id, card_id) {
+    const failedMessage = window.t("We failed to load the CVC codes");
+
+    return async (dispatch) => {
+        dispatch(actions.isLoading());
+
+        const batchedActions = [];
+        try {
+            let cardsCvc2Codes = await window.BunqDesktopClient.BunqJSClient.api.cardCvc2.list(user_id, card_id);
+            // turn string dates into date objects
+            cardsCvc2Codes = cardsCvc2Codes.map(cardsCvc2Code => {
+                const cardCvc2Info = cardsCvc2Code.CardGeneratedCvc2;
+                return {
+                    ...cardCvc2Info,
+                    created: new Date(cardCvc2Info.created),
+                    updated: new Date(cardCvc2Info.updated),
+                    expiry_time: new Date(cardCvc2Info.expiry_time)
+                };
+            });
+
+            batchedActions.push(actions.setInfo({ cvc2_codes: cardsCvc2Codes, user_id, card_id }));
+        } catch (error) {
+            BunqErrorHandler(dispatch, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([actions.isNotLoading()]));
+        }
+    };
+}
+
+export function cardGenerateCvc2(user_id, card_id, type: "GENERATED" | "STATIC" = "GENERATED") {
+    return async (dispatch) => {
+        dispatch(actions.isLoading());
+
+        const dispatchedActions = [];
+        try {
+            const cardsCvc2Code = await window.BunqDesktopClient.BunqJSClient.api.cardCvc2.post(user_id, card_id, type);
+            dispatch(actions.setInfo({ cvc2_codes: [cardsCvc2Code.CardGeneratedCvc2], user_id, card_id }));
+        } catch (error) {
+            BunqErrorHandler(dispatch, error, "We failed to generate a new CVC code");
+        } finally {
+            dispatch(dispatchedActions.concat([actions.isNotLoading()]));
+        }
+    };
+}
diff --git a/src/store/cardIdFilter/index.ts b/src/store/cardIdFilter/index.ts
new file mode 100644
index 00000000..b768ba9c
--- /dev/null
+++ b/src/store/cardIdFilter/index.ts
@@ -0,0 +1,56 @@
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+const addAction = createAction("add");
+const removeAction = createAction("remove");
+const toggleAction = createAction("toggle");
+const clearAction = createAction("clear");
+
+export interface IAccountIdFilterState {
+    selected_card_ids: number[];
+    toggle: boolean;
+}
+
+const initialState: IAccountIdFilterState = {
+    selected_card_ids: [],
+    toggle: false
+};
+
+const slice = createSlice({
+    name: "cardIdFilter",
+    initialState,
+    reducers: {
+        [addAction.type](state, action: PayloadAction<number>) {
+            const currentCardIds = [...state.selected_card_ids];
+
+            // prevent duplicates
+            if (!currentCardIds.includes(action.payload)) {
+                currentCardIds.push(action.payload);
+            }
+
+            state.selected_card_ids = currentCardIds;
+        },
+        [removeAction.type](state, action: PayloadAction<number>) {
+            const currentCardIds2 = [...state.selected_card_ids];
+
+            const removeIndex = currentCardIds2.findIndex(cardId => cardId === action.payload);
+            if (removeIndex === -1) return state;
+
+            currentCardIds2.splice(removeIndex, 1);
+
+            state.selected_card_ids = currentCardIds2;
+        },
+        [toggleAction.type](state) {
+            state.toggle = !state.toggle;
+        },
+        [clearAction.type]() {
+            return initialState;
+        },
+        ["GENERAL_FILTER_RESET"]() {
+            // TODO: turn into a saga subscriber
+            return initialState;
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/cards/index.ts b/src/store/cards/index.ts
new file mode 100644
index 00000000..52aa475d
--- /dev/null
+++ b/src/store/cards/index.ts
@@ -0,0 +1,89 @@
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+import { CARD_ORDER_LOCATION } from "~misc/consts";
+import Card from "~models/Card";
+
+const store = require("store");
+
+const cardOrderDefault: number[] = store.get(CARD_ORDER_LOCATION) !== undefined ? store.get(CARD_ORDER_LOCATION) : [];
+
+export interface ISetInfoPayload {
+    user_id: number;
+    cards: Array<Card>;
+}
+
+const setInfoAction = createAction("setInfo");
+const setOrderAction = createAction("setOrder");
+const isLoadingAction = createAction("isLoading");
+const isNotLoadingAction = createAction("isNotLoading");
+const clearAction = createAction("clear");
+
+
+export interface ICardsState {
+    cards: Array<Card>;
+    card_order: Array<number>;
+    loading: boolean;
+}
+
+const initialState: ICardsState = {
+    cards: [],
+    card_order: cardOrderDefault,
+    loading: false
+};
+
+const slice = createSlice({
+    name: "cards",
+    initialState,
+    reducers: {
+        [setInfoAction.type](state, action: PayloadAction<ISetInfoPayload>) {
+            const currentCardOrder = state.card_order ? state.card_order : [];
+            const cardOrder = [...currentCardOrder];
+            const cards = action.payload.cards;
+
+            cards.forEach(card => {
+                const cardId = card.id;
+                if (!cardOrder.includes(cardId)) {
+                    cardOrder.push(cardId);
+                }
+            });
+
+            store.set(CARD_ORDER_LOCATION, cardOrder);
+            state.cards = action.payload.cards;
+            state.card_order = cardOrder;
+        },
+        [setOrderAction.type](state, action: PayloadAction<number[]>) {
+            store.set(CARD_ORDER_LOCATION, action.payload);
+
+            state.card_order = action.payload;
+        },
+        [isLoadingAction.type](state) {
+            state.loading = true;
+        },
+        [isNotLoadingAction.type](state) {
+            state.loading = false;
+        },
+        [clearAction.type]() {
+            // TODO: turn into a saga subscribe
+            store.remove(CARD_ORDER_LOCATION);
+            return initialState;
+        },
+        ["REGISTRATION_CLEAR_PRIVATE_DATA"]() {
+            // TODO: turn into a saga subscribe
+            store.remove(CARD_ORDER_LOCATION);
+            return initialState;
+        },
+        ["REGISTRATION_LOG_OUT"]() {
+            // TODO: turn into a saga subscribe
+            store.remove(CARD_ORDER_LOCATION);
+            return initialState;
+        },
+        ["REGISTRATION_CLEAR_USER_INFO"]() {
+            // TODO: turn into a saga subscribe
+            store.remove(CARD_ORDER_LOCATION);
+            return initialState;
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/cards/thunks.ts b/src/store/cards/thunks.ts
new file mode 100644
index 00000000..e5c47cd1
--- /dev/null
+++ b/src/store/cards/thunks.ts
@@ -0,0 +1,55 @@
+import BunqDesktopClient from "~components/BunqDesktopClient";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import Card from "~models/Card";
+import { actions } from "./index";
+
+declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+
+export function cardsUpdate(user_id) {
+    const failedMessage = window.t("We failed to load the cards overview");
+
+    return async (dispatch) => {
+        dispatch(actions.isLoading());
+
+        const batchedActions = [];
+        try {
+            const cards: number[] = await window.BunqDesktopClient.BunqJSClient.api.card.list(user_id);
+            const wrappedCards = cards.map(card => new Card(card));
+
+            batchedActions.push(actions.setInfo({ cards: wrappedCards, user_id }));
+        } catch (error) {
+            BunqErrorHandler(dispatch, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([actions.isNotLoading()]));
+        }
+    };
+}
+
+export function cardsAssignAccounts(user_id, card_id, assignments) {
+    const failedMessage = window.t("We failed to assign the accounts to this card");
+
+    return async (dispatch) => {
+        dispatch(actions.isLoading());
+
+        const batchedActions = [];
+        try {
+            await window.BunqDesktopClient.BunqJSClient.api.card.update(
+                user_id,
+                card_id,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                assignments
+            );
+            dispatch(cardsUpdate(user_id));
+        } catch (error) {
+            BunqErrorHandler(dispatch, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([actions.isNotLoading()]));
+        }
+    };
+}
+
diff --git a/src/react/Reducers/categories.js b/src/store/categories/index.ts
similarity index 50%
rename from src/react/Reducers/categories.js
rename to src/store/categories/index.ts
index ce17cab3..7f317410 100644
--- a/src/react/Reducers/categories.js
+++ b/src/store/categories/index.ts
@@ -1,11 +1,13 @@
-import settings from "../ImportWrappers/electronSettings";
-import { generateGUID } from "../Functions/Utils";
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
 
-// default categories if no previous were found
-const defaultCategories = require("@bunq-community/bunqdesktop-templates/categories.json");
+import Category from "~types/Category";
 
-export const BUNQDESKTOP_CATEGORIES = "BUNQDESKTOP_CATEGORIES";
-export const BUNQDESKTOP_CATEGORY_CONNECTIONS = "BUNQDESKTOP_CATEGORY_CONNECTIONS";
+import settings from "~importwrappers/electronSettings";
+import { generateGUID } from "~functions/Utils";
+
+import { BUNQDESKTOP_CATEGORIES, BUNQDESKTOP_CATEGORY_CONNECTIONS } from "~misc/consts";
+
+import defaultCategories from "@bunq-community/bunqdesktop-templates/categories.json";
 
 const categoriesStored = settings.get(BUNQDESKTOP_CATEGORIES);
 const categoryConnectionsStored = settings.get(BUNQDESKTOP_CATEGORY_CONNECTIONS);
@@ -21,51 +23,105 @@ const categoryConnectionsStoredDefault =
 if (categoriesStored === undefined) settings.set(BUNQDESKTOP_CATEGORIES, defaultCategories);
 if (categoryConnectionsStored === undefined) settings.set(BUNQDESKTOP_CATEGORY_CONNECTIONS, {});
 
-// construct the default state
-export const defaultState = {
-    last_update: new Date().getTime(),
+
+export interface ISetCategoryPayload {
+    id: number;
+    label: string;
+    color: string;
+    icon: number;
+    priority: number;
+    options?: any;
+}
+
+const setCategoryAction = createAction("setCategory");
+
+export interface ISetCategoriesPayload {
+    [id: string]: Category;
+}
+
+const setCategoriesAction = createAction("setCategories");
+export type IRemoveCategoryPayload = string;
+const removeCategoryAction = createAction("removeCategory");
+
+export interface ISetCategoryConnectionPayload {
+    category_id: number;
+    item_type: string;
+    item_id: number;
+}
+
+const setCategoryConnectionAction = createAction("setCategoryConnection");
+export type ISetCategoryConnectionMultiplePayload = Array<{
+    category_id: number;
+    event_type: number;
+    event_id: number;
+}>
+const setCategoryConnectionMultipleAction = createAction("setCategoryConnectionMultiple");
+
+export interface ISetCategoryConnectionsPayload {
+    [id: string]: ISetCategoryConnectionPayload;
+}
+
+const setCategoryConnectionsAction = createAction("setCategoryConnections");
+
+export interface IRemoveCategoryConnectionPayload {
+    category_id: number;
+    item_type: string;
+    item_id: number;
+}
+
+const removeCategoryConnectionAction = createAction("removeCategoryConnection");
+
+
+export interface ICategoriesState {
+    last_update: number;
+    categories: {
+        [id: string]: Category;
+    };
+    category_connections: {
+        [id: string]: any;
+    };
+}
+
+const initialState: ICategoriesState = {
+    last_update: +new Date(),
     categories: categoriesStoredDefault,
-    category_connections: categoryConnectionsStoredDefault
+    category_connections: categoryConnectionsStoredDefault,
 };
 
-export default function reducer(state = defaultState, action) {
-    const categories = { ...state.categories };
-    const category_connections = { ...state.category_connections };
-
-    switch (action.type) {
-        case "CATEGORIES_SET_CATEGORIES":
-            settings.set(BUNQDESKTOP_CATEGORIES, action.payload.categories);
-            return {
-                ...state,
-                last_update: new Date().getTime(),
-                categories: action.payload.categories
-            };
-
-        case "CATEGORIES_SET_CATEGORY":
+const slice = createSlice({
+    name: "categories",
+    initialState,
+    reducers: {
+        [setCategoriesAction.type](state, action: PayloadAction<ISetCategoriesPayload>) {
+            // TODO: move to saga subscriber
+            settings.set(BUNQDESKTOP_CATEGORIES, action.payload);
+
+            state.last_update = +new Date();
+            state.categories = action.payload;
+        },
+        [setCategoryAction.type](state, action: PayloadAction<ISetCategoryPayload>) {
             const randomId = action.payload.id ? action.payload.id : generateGUID();
 
-            categories[randomId] = {
+            state.categories[randomId] = {
                 id: randomId,
                 label: action.payload.label,
                 color: action.payload.color,
                 icon: action.payload.icon,
                 priority: action.payload.priority,
-                ...action.payload.options
+                ...(action.payload.options ?? {}),
             };
 
-            settings.set(BUNQDESKTOP_CATEGORIES, categories);
-            return {
-                ...state,
-                last_update: new Date().getTime(),
-                categories: categories
-            };
+            // TODO: move to saga subscriber
+            settings.set(BUNQDESKTOP_CATEGORIES, state.categories);
 
-        case "CATEGORIES_REMOVE_CATEGORY":
+            state.last_update = +new Date();
+        },
+        [removeCategoryAction.type](state, action: PayloadAction<IRemoveCategoryPayload>) {
             const currentCategories = { ...state.categories };
             const currentCategoryConnections = {
                 ...state.category_connections
             };
-            const removeCategoryId = action.payload.category_id;
+            const removeCategoryId = action.payload;
 
             // delete this category from the list
             if (currentCategories[removeCategoryId]) {
@@ -77,16 +133,16 @@ export default function reducer(state = defaultState, action) {
                 delete currentCategoryConnections[removeCategoryId];
             }
 
+            // TODO: move to saga subscriber
             settings.set(BUNQDESKTOP_CATEGORIES, currentCategories);
+            // TODO: move to saga subscriber
             settings.set(BUNQDESKTOP_CATEGORY_CONNECTIONS, currentCategoryConnections);
-            return {
-                ...state,
-                last_update: new Date().getTime(),
-                categories: currentCategories,
-                category_connections: currentCategoryConnections
-            };
 
-        case "CATEGORIES_REMOVE_CATEGORY_CONNECTION":
+            state.last_update = +new Date();
+            state.categories = currentCategories;
+            state.category_connections = currentCategoryConnections;
+        },
+        [removeCategoryConnectionAction.type](state, action: PayloadAction<IRemoveCategoryConnectionPayload>) {
             const currentCategoryConnections2 = {
                 ...state.category_connections
             };
@@ -112,22 +168,21 @@ export default function reducer(state = defaultState, action) {
                 }
             }
 
+            // TODO: move to saga subscriber
             settings.set(BUNQDESKTOP_CATEGORY_CONNECTIONS, currentCategoryConnections2);
-            return {
-                ...state,
-                last_update: new Date().getTime(),
-                category_connections: currentCategoryConnections2
-            };
 
-        case "CATEGORIES_SET_CATEGORY_CONNECTIONS":
+            state.last_update = +new Date();
+            state.category_connections = currentCategoryConnections2;
+        },
+        [setCategoryConnectionsAction.type](state, action: PayloadAction<ISetCategoryConnectionsPayload>) {
+            // TODO: move to saga subscriber
             settings.set(BUNQDESKTOP_CATEGORY_CONNECTIONS, action.payload.category_connections);
-            return {
-                ...state,
-                last_update: new Date().getTime(),
-                category_connections: action.payload.category_connections
-            };
 
-        case "CATEGORIES_SET_CATEGORY_CONNECTION":
+            state.last_update = +new Date();
+            state.category_connections = action.payload.category_connections;
+        },
+        [setCategoryConnectionAction.type](state, action: PayloadAction<ISetCategoryConnectionPayload>) {
+            const category_connections = { ...state.category_connections };
             const categoryId2 = action.payload.category_id;
             const itemType = action.payload.item_type;
             const itemId = action.payload.item_id;
@@ -144,15 +199,15 @@ export default function reducer(state = defaultState, action) {
                 category_connections[categoryId2][itemType].push(itemId);
             }
 
+            // TODO: move to saga subscriber
             settings.set(BUNQDESKTOP_CATEGORY_CONNECTIONS, category_connections);
-            return {
-                ...state,
-                last_update: new Date().getTime(),
-                category_connections: category_connections
-            };
 
-        case "CATEGORIES_SET_CATEGORY_CONNECTION_MULTIPLE":
-            const categoryConnectionMultiple = action.payload.category_connections;
+            state.last_update = +new Date();
+            state.category_connections = category_connections;
+        },
+        [setCategoryConnectionMultipleAction.type](state, action: PayloadAction<ISetCategoryConnectionMultiplePayload>) {
+            const category_connections = { ...state.category_connections };
+            const categoryConnectionMultiple = action.payload;
 
             categoryConnectionMultiple.forEach(categoryConnectionItem => {
                 const catId = categoryConnectionItem.category_id;
@@ -175,28 +230,26 @@ export default function reducer(state = defaultState, action) {
             // update settings
             settings.set(BUNQDESKTOP_CATEGORY_CONNECTIONS, category_connections);
             // return new state
-            return {
-                ...state,
-                last_update: new Date().getTime(),
-                category_connections: category_connections
-            };
 
-        // update categories in new settings location
-        case "OPTIONS_OVERWRITE_SETTINGS_LOCATION":
+            state.last_update = +new Date();
+            state.category_connections = category_connections;
+        },
+        ["OPTIONS_OVERWRITE_SETTINGS_LOCATION"](state) {
+            // TODO: move to saga subscriber
             settings.set(BUNQDESKTOP_CATEGORIES, state.categories);
             settings.set(BUNQDESKTOP_CATEGORY_CONNECTIONS, state.category_connections);
-            return { ...state };
-
-        // load categories from new settings location
-        case "OPTIONS_LOAD_SETTINGS_LOCATION":
+        },
+        ["OPTIONS_LOAD_SETTINGS_LOCATION"](state) {
+            // TODO: move to saga subscriber
             const storedCategories = settings.get(BUNQDESKTOP_CATEGORIES);
             const storedConnections = settings.get(BUNQDESKTOP_CATEGORY_CONNECTIONS);
-            return {
-                ...state,
-                last_update: new Date().getTime(),
-                categories: storedCategories ? storedCategories : state.categories,
-                category_connections: storedConnections ? storedConnections : state.category_connections
-            };
-    }
-    return state;
-}
+
+            state.last_update = +new Date();
+            state.categories = storedCategories ? storedCategories : state.categories;
+            state.category_connections = storedConnections ? storedConnections : state.category_connections;
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/categoryFilter/index.ts b/src/store/categoryFilter/index.ts
new file mode 100644
index 00000000..2e3d5def
--- /dev/null
+++ b/src/store/categoryFilter/index.ts
@@ -0,0 +1,45 @@
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+const addCategoryIdAction = createAction("addCategoryId");
+const removeCategoryIdAction = createAction("removeCategoryId");
+const toggleAction = createAction("toggle");
+const clearAction = createAction("clear");
+const resetAction = createAction("reset");
+
+export interface ICategoryFilterState {
+    selected_categories: Array<number>;
+    toggle: boolean;
+}
+
+const initialState: ICategoryFilterState = {
+    selected_categories: [],
+    toggle: false
+};
+
+const slice = createSlice({
+    name: "categoryFilter",
+    initialState,
+    reducers: {
+        [addCategoryIdAction.type](state, action: PayloadAction<number>) {
+            // prevent duplicates
+            if (!state.selected_categories.includes(action.payload)) {
+                state.selected_categories.push(action.payload);
+            }
+        },
+        [removeCategoryIdAction.type](state, action: PayloadAction<number>) {
+            state.selected_categories.splice(action.payload, 1);
+        },
+        [toggleAction.type](state) {
+            state.toggle = !state.toggle;
+        },
+        [clearAction.type]() {
+            return initialState;
+        },
+        [resetAction.type]() {
+            return initialState;
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/categoryRules/index.ts b/src/store/categoryRules/index.ts
new file mode 100644
index 00000000..ea559b5a
--- /dev/null
+++ b/src/store/categoryRules/index.ts
@@ -0,0 +1,122 @@
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+import _ from "lodash";
+
+import { STORED_CATEGORY_RULES } from "~misc/consts";
+import settings from "~importwrappers/electronSettings";
+import { RuleCollectionList } from "~types/Types";
+import RuleCollection from "~types/RuleCollection";
+
+// default category rules if no previous were found
+
+// format the basic default category rules
+const formattedDefaultCategoryRules = {};
+const defaultCategoryRules = require("@bunq-community/bunqdesktop-templates/category-rules.json");
+defaultCategoryRules["category-rules"].forEach(defaultCategoryRule => {
+    // turn empty json data into ruleCollection objects
+    const ruleCollection = new RuleCollection();
+    ruleCollection.fromObject(defaultCategoryRule);
+    ruleCollection.ensureId();
+
+    formattedDefaultCategoryRules[ruleCollection.getId()] = ruleCollection;
+});
+
+const categoryRulesStored = settings.get(STORED_CATEGORY_RULES);
+const categoryRulesDefault: RuleCollectionList =
+    categoryRulesStored !== undefined ? categoryRulesStored : formattedDefaultCategoryRules;
+
+// store the default category rules
+if (categoryRulesStored === undefined) {
+    settings.set(STORED_CATEGORY_RULES, formattedDefaultCategoryRules);
+}
+
+// new formatted list
+const formattedCategoryRulesDefault: RuleCollectionList = {};
+Object.keys(categoryRulesDefault).forEach(categoryRuleId => {
+    const ruleCollection: RuleCollection = new RuleCollection();
+
+    // get the json value for this key
+    const ruleObject: any = categoryRulesDefault[categoryRuleId];
+    // load the stored object string into the rule collection
+    ruleCollection.fromObject(ruleObject);
+    // add to the list
+    formattedCategoryRulesDefault[categoryRuleId] = ruleCollection;
+});
+
+const setRuleAction = createAction("setRule");
+const setRulesAction = createAction("setRules");
+const removeRuleAction = createAction("removeRule");
+
+export interface ICategoryRulesState {
+    last_update: number;
+    category_rules: RuleCollectionList;
+}
+
+const initialState: ICategoryRulesState = {
+    last_update: +new Date(),
+    category_rules: _.toPlainObject(formattedCategoryRulesDefault),
+};
+
+const slice = createSlice({
+    name: "categoryRules",
+    initialState,
+    reducers: {
+        [setRuleAction.type](state, action: PayloadAction<RuleCollection>) {
+            const rule_collection: RuleCollection = action.payload;
+            const categoryRuleId: string = rule_collection.getId();
+
+            // store this collection in the list or overwrite existing
+            state.category_rules[categoryRuleId] = rule_collection;
+
+            // store the category rules
+            // TODO: move into saga subscribe
+            settings.set(STORED_CATEGORY_RULES, state.category_rules);
+
+            state.last_update = +new Date();
+        },
+        [setRulesAction.type](state, action: PayloadAction<RuleCollectionList>) {
+            // TODO: move into saga subscribe
+            settings.set(STORED_CATEGORY_RULES, action.payload);
+
+            state.category_rules = action.payload;
+
+            state.last_update = +new Date();
+        },
+        [removeRuleAction.type](state, action: PayloadAction<string>) {
+            const removeCategoryId: string = action.payload;
+
+            // delete this category from the list
+            if (state.category_rules[removeCategoryId]) {
+                delete state.category_rules[removeCategoryId];
+            }
+
+            // store the category rules
+            settings.set(STORED_CATEGORY_RULES, state.category_rules);
+
+            state.last_update = +new Date();
+        },
+        ["OPTIONS_OVERWRITE_SETTINGS_LOCATION"](state) {
+            // TODO: move into saga subscribe
+            settings.set(STORED_CATEGORY_RULES, state.category_rules);
+        },
+        ["OPTIONS_LOAD_SETTINGS_LOCATION"](state) {
+            // TODO: move into saga subscribe
+            const storedCategoryRules = settings.get(STORED_CATEGORY_RULES);
+            const parsedStoredList: RuleCollectionList = {};
+
+            if (storedCategoryRules) {
+                Object.keys(storedCategoryRules).forEach(id => {
+                    parsedStoredList[id] = _.toPlainObject(new RuleCollection(storedCategoryRules[id]));
+                });
+            }
+
+            state.last_update = +new Date();
+            state.category_rules = {
+                ...state.category_rules,
+                ...parsedStoredList,
+            };
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/contacts/index.ts b/src/store/contacts/index.ts
new file mode 100644
index 00000000..64c0ecfa
--- /dev/null
+++ b/src/store/contacts/index.ts
@@ -0,0 +1,188 @@
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+import _ from "lodash";
+
+import BunqDesktopClient from "~components/BunqDesktopClient";
+import { STORED_CONTACTS } from "~misc/consts";
+
+declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+
+export interface ISetInfoTypePayload {
+    type: string;
+    contacts: any;
+}
+
+const setInfoTypeAction = createAction("setInfoType");
+
+export interface ISetInfoPayload {
+    BunqJSClient?: boolean;
+    contacts: any;
+}
+
+const setInfoAction = createAction(
+    "setInfo",
+    ({ BunqJSClient = false, contacts }: ISetInfoPayload) => ({ payload: { BunqJSClient, contacts }})
+);
+const isLoadingAction = createAction("isLoading");
+const isNotLoadingAction = createAction("isNotLoading");
+
+export interface IClearPayload {
+    BunqJSClient: boolean;
+    type: string;
+}
+
+const clearAction = createAction("clear");
+
+export interface IContactsState {
+    last_update: number;
+    contacts: {
+        [key: string]: any;
+    };
+    loading: boolean;
+}
+
+const initialState: IContactsState = {
+    last_update: +new Date(),
+    contacts: {},
+    loading: false
+};
+
+const slice = createSlice({
+    name: "contact",
+    initialState,
+    reducers: {
+        [setInfoTypeAction.type](state, action: PayloadAction<ISetInfoTypePayload>) {
+            const currentContactState = { ...state.contacts };
+            const contacts = action.payload.contacts;
+            const contactType = action.payload.type;
+
+            const currentContacts = currentContactState[contactType] ? currentContactState[contactType] : [];
+
+            // go through all contacts and combine theme
+            contacts.map(newContact => {
+                let foundExisting = false;
+                currentContacts.map(stateContact => {
+                    if (newContact.name === stateContact.name) {
+                        foundExisting = true;
+                        // combine the lists
+                        stateContact.emails = _.uniq([...stateContact.emails, ...newContact.emails]);
+                        stateContact.phoneNumbers = _.uniq([
+                            ...stateContact.phoneNumbers,
+                            ...newContact.phoneNumbers
+                        ]);
+                    }
+                });
+
+                // no existing found so we just push it to the end instead
+                if (foundExisting === false) {
+                    currentContacts.push(newContact);
+                }
+            });
+
+            // set the new combined contacts for this type
+            currentContactState[action.payload.type] = currentContacts.sort((a, b) => {
+                if (a.name === "") {
+                    return 1;
+                } else if (b.name === "") {
+                    return -1;
+                }
+
+                return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
+            });
+
+            const BunqDesktopClient = window.BunqDesktopClient;
+            BunqDesktopClient.storeEncrypt(
+                {
+                    items: currentContactState
+                },
+                STORED_CONTACTS
+            ).then();
+
+            state.last_update = +new Date();
+            state.contacts = currentContactState;
+        },
+        [setInfoAction.type](state, action: PayloadAction<ISetInfoPayload>) {
+            const contacts2 = action.payload.contacts;
+
+            const BunqDesktopClient = window.BunqDesktopClient;
+            BunqDesktopClient.storeEncrypt(
+                {
+                    items: contacts2
+                },
+                STORED_CONTACTS
+            )
+                .then(() => {
+                })
+                .catch(() => {
+                });
+
+            state.last_update = +new Date();
+            state.contacts = contacts2;
+        },
+        [isLoadingAction.type](state) {
+            state.loading = true;
+        },
+        [isNotLoadingAction.type](state) {
+            state.loading = false;
+        },
+        [clearAction.type](state, action: PayloadAction<IClearPayload>) {
+            let newState = state;
+
+            if (action.payload.type) {
+                // reset this type to empty array
+                newState.contacts[action.payload.type] = [];
+                newState.last_update = +new Date();
+
+                // store the data if we have access to the bunqjsclient
+                if (action.payload.BunqJSClient) {
+                    const BunqDesktopClient = window.BunqDesktopClient;
+                    BunqDesktopClient.storeEncrypt(
+                        {
+                            items: newState.contacts
+                        },
+                        STORED_CONTACTS
+                    )
+                        .then();
+                }
+            } else {
+                // remove the data completely
+                if (action.payload.BunqJSClient) {
+                    // FIXME: can't pass BunqJSClient as payload
+                    // action.payload.BunqJSClient.Session.asyncStorageRemove(STORED_CONTACTS)
+                    //     .then(() => {
+                    //     })
+                    //     .catch(() => {
+                    //     });
+                }
+            }
+
+            return initialState;
+        },
+        ["REGISTRATION_CLEAR_PRIVATE_DATA"](state) {
+            // TODO: move to saga subscribe
+            window.BunqDesktopClient.storeRemove(STORED_CONTACTS);
+
+            state.last_update = +new Date();
+            state.contacts = {};
+            state.loading = false;
+        },
+        ["REGISTRATION_LOG_OUT"](state) {
+            // TODO: move to saga subscribe
+            window.BunqDesktopClient.storeRemove(STORED_CONTACTS);
+
+            state.last_update = +new Date();
+            state.contacts = {};
+            state.loading = false;
+        },
+        ["REGISTRATION_CLEAR_USER_INFO"](state) {
+            // TODO: move to saga subscribe
+            window.BunqDesktopClient.storeRemove(STORED_CONTACTS);
+
+            state.last_update = +new Date();
+            state.contacts = {};
+            state.loading = false;
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/contacts/thunks.ts b/src/store/contacts/thunks.ts
new file mode 100644
index 00000000..45ac8057
--- /dev/null
+++ b/src/store/contacts/thunks.ts
@@ -0,0 +1,272 @@
+import url from "url";
+import axios from "axios";
+import vcf from "vcf";
+
+import BunqDesktopClient from "~components/BunqDesktopClient";
+import Logger from "~functions/Logger";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import { getInternationalFormat } from "~functions/PhoneLib";
+import fs from "~importwrappers/fs";
+import { STORED_CONTACTS } from "~misc/consts";
+import { AppDispatch, BatchedActions } from "~store/index";
+import { actions } from "./index";
+
+declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+
+export function loadStoredContacts() {
+    return async (dispatch: AppDispatch) => {
+        try {
+            const data = await window.BunqDesktopClient.storeDecrypt(STORED_CONTACTS);
+            if (data && data.items) {
+                // turn plain objects into Model objects
+                dispatch(actions.setInfo({ contacts: data.items }));
+            }
+        } catch (e) {
+        }
+    };
+}
+
+export function contactInfoUpdateGoogle(BunqJSClient, accessToken) {
+    const failedMessage = window.t("We failed to load the contacts from your Google account");
+
+    return async (dispatch: AppDispatch) => {
+        dispatch(actions.isLoading());
+
+        // format the url
+        const contactsUrl = url.format({
+            pathname: "//www.google.com/m8/feeds/contacts/default/full",
+            protocol: "https",
+            query: {
+                alt: "json",
+                "max-results": 10000
+            }
+        });
+
+        const batchedActions: BatchedActions = [];
+        try {
+            const response = await axios.get(contactsUrl, {
+                headers: {
+                    "GData-Version": 3.0,
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${accessToken}`
+                }
+            });
+            const responseData = response.data;
+
+            const collectedEntries = [];
+
+            // go through all entries
+            if (responseData.feed.entry) {
+                responseData.feed.entry.map(entry => {
+                    // has email
+
+                    const emails = [];
+                    const phoneNumbers = [];
+                    let displayName = "";
+
+                    // has emails, loop through them
+                    if (entry["gd$email"] && entry["gd$email"].length > 0) {
+                        entry["gd$email"].map(email => {
+                            emails.push(email.address);
+                        });
+                    }
+
+                    // has numbers, loop through them
+                    if (entry["gd$phoneNumber"] && entry["gd$phoneNumber"].length > 0) {
+                        entry["gd$phoneNumber"].map(phoneNumber => {
+                            const inputNumber = phoneNumber["uri"];
+
+                            if (inputNumber) {
+                                // remove the 'uri:' part from string
+                                const removedFrontNumber = inputNumber.slice(4, inputNumber.length);
+
+                                // replace - and spaces from string
+                                const removedCharsNumber = removedFrontNumber.replace(/[\- ]/g, "");
+
+                                // add number to the list
+                                phoneNumbers.push(removedCharsNumber);
+                            }
+                        });
+                    }
+
+                    // has fullname, add it
+                    if (entry["gd$name"] && entry["gd$name"]["gd$fullName"]) {
+                        displayName = entry["gd$name"]["gd$fullName"]["$t"];
+                    }
+
+                    if (emails.length > 0 || phoneNumbers.length > 0) {
+                        collectedEntries.push({
+                            name: displayName,
+                            emails: emails,
+                            phoneNumbers: phoneNumbers
+                        });
+                    }
+                });
+            }
+
+            // set the contacts
+            batchedActions.push(actions.setInfoType({ contacts: collectedEntries, type: "GoogleContacts" }));
+        } catch (error) {
+            BunqErrorHandler(batchedActions, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([actions.isNotLoading()]));
+        }
+    };
+}
+
+export function contactInfoUpdateOffice365(BunqJSClient, accessToken) {
+    const failedMessage = window.t("We failed to load the contacts from your Google account");
+
+    return async (dispatch) => {
+        dispatch(actions.isLoading());
+
+        // format the url
+        const contactsUrl = url.format({
+            pathname: "//outlook.office.com/api/v2.0/me/contacts",
+            protocol: "https",
+            query: {}
+        });
+
+        const batchedActions: BatchedActions = [];
+        try {
+            const response = await axios.get(contactsUrl, {
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${accessToken}`
+                }
+            });
+            const responseData = response.data;
+
+            const collectedEntries = [];
+
+            // go through all entries
+            if (responseData.value) {
+                responseData.value.map(entry => {
+                    // has email
+
+                    const emails = [];
+                    const phoneNumbers = [];
+
+                    // has emails, loop through them
+                    if (entry["EmailAddresses"] && entry["EmailAddresses"].length > 0) {
+                        entry["EmailAddresses"].map(email => {
+                            emails.push(email.Address);
+                        });
+                    }
+
+                    // combine phone numbers received into a single list
+                    let receivedPhoneNumbers = [];
+                    if (entry["BusinessPhones"] && entry["BusinessPhones"].length > 0) {
+                        receivedPhoneNumbers = [...receivedPhoneNumbers, ...entry["BusinessPhones"]];
+                    }
+                    if (entry["HomePhones"] && entry["HomePhones"].length > 0) {
+                        receivedPhoneNumbers = [...receivedPhoneNumbers, ...entry["HomePhones"]];
+                    }
+
+                    receivedPhoneNumbers.map(phoneNumber => {
+                        // format as international
+                        const phoneNumberFormatted = getInternationalFormat(phoneNumber);
+
+                        if (phoneNumberFormatted) {
+                            // add number to the list
+                            phoneNumbers.push(phoneNumberFormatted);
+                        }
+                    });
+
+                    if (emails.length > 0 || phoneNumbers.length > 0) {
+                        collectedEntries.push({
+                            name: entry.DisplayName,
+                            emails: emails,
+                            phoneNumbers: phoneNumbers
+                        });
+                    }
+                });
+            }
+
+            // set the contacts
+            batchedActions.push(actions.setInfoType({ contacts: collectedEntries, type: "Office365" }));
+        } catch (error) {
+            BunqErrorHandler(dispatch, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([actions.isNotLoading()]));
+        }
+    };
+}
+
+export function contactInfoUpdateApple(BunqJSClient, files) {
+    const failedMessage = window.t("We failed to load the contacts from the vCard file");
+
+    return async (dispatch: AppDispatch) => {
+        dispatch(actions.isLoading());
+
+        const content = fs.readFileSync(files[0]);
+
+        let result;
+        try {
+            result = vcf.parse(content.toString());
+        } catch (error) {
+            Logger.error(error.message);
+            dispatch(actions.isNotLoading());
+            return;
+        }
+
+        const collectedEntries = [];
+
+        // turn single item into array
+        if (result.data) {
+            result = [result];
+        }
+
+        // go through each result
+        result.forEach(vcardInstance => {
+            let displayName = "";
+            let emails = [];
+            let phoneNumbers = [];
+
+            if (vcardInstance.get("n")) {
+                const nameData = vcardInstance.get("n");
+                const nameParts = nameData.valueOf().split(";");
+                const [familyName, givenName, additionalName, prefix] = nameParts;
+
+                // combine the parts into a single display name
+                displayName = `${prefix} ${givenName} ${additionalName} ${familyName}`.trim();
+            }
+
+            if (vcardInstance.get("tel")) {
+                let phoneData = vcardInstance.get("tel");
+                if (phoneData._data) phoneData = [phoneData];
+
+                phoneData.map(phoneNumber => {
+                    // format as international
+                    const phoneNumberFormatted = getInternationalFormat(phoneNumber.valueOf());
+                    if (phoneNumberFormatted) {
+                        // add number to the list
+                        phoneNumbers.push(phoneNumberFormatted);
+                    }
+                });
+            }
+
+            if (vcardInstance.get("email")) {
+                let emailData = vcardInstance.get("email");
+                if (emailData._data) emailData = [emailData];
+
+                emailData.map(email => {
+                    if (email._data) emails.push(email.valueOf());
+                });
+            }
+
+            if (emails.length > 0 || phoneNumbers.length > 0) {
+                collectedEntries.push({
+                    name: displayName,
+                    emails: emails,
+                    phoneNumbers: phoneNumbers
+                });
+            }
+        });
+
+        dispatch([
+            actions.setInfoType({ contacts: collectedEntries, type: "AppleContacts" }),
+            actions.isNotLoading(),
+        ]);
+    };
+}
diff --git a/src/store/dateFilter/index.ts b/src/store/dateFilter/index.ts
new file mode 100644
index 00000000..768bb45f
--- /dev/null
+++ b/src/store/dateFilter/index.ts
@@ -0,0 +1,42 @@
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+const fromSetAction = createAction("fromSet");
+const toSetAction = createAction("toSet");
+const fromClearAction = createAction("fromClear");
+const toClearAction = createAction("toClear");
+const resetAction = createAction("reset");
+
+export interface ICategoryFilterState {
+    from_date: null | number;
+    to_date: null | number;
+}
+
+const initialState: ICategoryFilterState = {
+    from_date: null,
+    to_date: null,
+};
+
+const slice = createSlice({
+    name: "dateFilter",
+    initialState,
+    reducers: {
+        [fromSetAction.type](state, action: PayloadAction<number>) {
+            state.from_date = action.payload;
+        },
+        [toSetAction.type](state, action: PayloadAction<number>) {
+            state.to_date = action.payload;
+        },
+        [fromClearAction.type](state) {
+            state.from_date = null;
+        },
+        [toClearAction.type](state) {
+            state.to_date = null;
+        },
+        [resetAction.type]() {
+            return initialState;
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/exportNew/index.ts b/src/store/exportNew/index.ts
new file mode 100644
index 00000000..0dbde578
--- /dev/null
+++ b/src/store/exportNew/index.ts
@@ -0,0 +1,28 @@
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+const isLoadingAction = createAction("isLoading");
+const isNotLoadingAction = createAction("isNotLoading");
+
+export interface IExportNewState {
+    loading: boolean;
+}
+
+const initialState: IExportNewState = {
+    loading: false,
+};
+
+const slice = createSlice({
+    name: "exportNew",
+    initialState,
+    reducers: {
+        [isLoadingAction.type](state) {
+            state.loading = true;
+        },
+        [isNotLoadingAction.type](state) {
+            state.loading = false;
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/exportNew/thunks.ts b/src/store/exportNew/thunks.ts
new file mode 100644
index 00000000..2e66998d
--- /dev/null
+++ b/src/store/exportNew/thunks.ts
@@ -0,0 +1,34 @@
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import { AppWindow } from "~app";
+import { AppDispatch } from "~store/index";
+import { actions } from "./index";
+
+declare let window: AppWindow;
+
+export function exportNew(
+    BunqJSClient,
+    user_id,
+    account_id,
+    statement_format,
+    date_start,
+    date_end,
+    options = {
+        regional_format: "EUROPEAN"
+    }
+) {
+    const failedMessage = window.t("We failed to create the export for this monetary account");
+
+    return async (dispatch: AppDispatch) => {
+        dispatch(actions.isLoading());
+
+        const batchedActions = [];
+        try {
+            await  BunqJSClient.api.customerStatementExport
+                .post(user_id, account_id, statement_format, date_start, date_end, options);
+        } catch (error) {
+            BunqErrorHandler(batchedActions, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([actions.isNotLoading()]));
+        }
+    };
+}
diff --git a/src/store/exports/index.ts b/src/store/exports/index.ts
new file mode 100644
index 00000000..f997a5ca
--- /dev/null
+++ b/src/store/exports/index.ts
@@ -0,0 +1,59 @@
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export interface ISetInfoPayload {
+    exports: Array<any>;
+    user_id: number;
+    account_id: number;
+}
+
+const setInfoAction = createAction("setInfo");
+const isLoadingAction = createAction("isLoading");
+const isNotLoadingAction = createAction("isNotLoading");
+const clearAction = createAction("clear");
+
+export interface IExportsState {
+    exports: Array<any>;
+    user_id: boolean | number;
+    account_id: boolean | number;
+    loading: boolean;
+}
+
+const initialState: IExportsState = {
+    exports: [],
+    user_id: false,
+    account_id: false,
+    loading: false,
+};
+
+const slice = createSlice({
+    name: "exports",
+    initialState,
+    reducers: {
+        [setInfoAction.type](state, action: PayloadAction<ISetInfoPayload>) {
+            state.exports = action.payload.exports;
+            state.user_id = action.payload.user_id;
+            state.account_id = action.payload.account_id;
+        },
+        [isLoadingAction.type](state) {
+            state.loading = true;
+        },
+        [isNotLoadingAction.type](state) {
+            state.loading = false;
+        },
+        [clearAction.type]() {
+            return initialState;
+        },
+        ["REGISTRATION_CLEAR_PRIVATE_DATA"]() {
+            return initialState;
+        },
+        ["REGISTRATION_LOG_OUT"]() {
+            return initialState;
+        },
+        ["REGISTRATION_CLEAR_USER_INFO"]() {
+            return initialState;
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/store/exports/thunks.ts b/src/store/exports/thunks.ts
new file mode 100644
index 00000000..772930c1
--- /dev/null
+++ b/src/store/exports/thunks.ts
@@ -0,0 +1,33 @@
+import { AppWindow } from "~app";
+import BunqErrorHandler from "~functions/BunqErrorHandler";
+import { AppDispatch, BatchedActions } from "~store/index";
+import { actions } from "./index";
+
+declare let window: AppWindow;
+
+export function exportInfoUpdate(
+    BunqJSClient,
+    user_id,
+    account_id,
+    options = {
+        count: 200,
+        newer_id: false,
+        older_id: false
+    }
+) {
+    const failedMessage = window.t("We failed to load the exports for this monetary account");
+
+    return async (dispatch: AppDispatch) => {
+        dispatch(actions.isLoading());
+
+        const batchedActions: BatchedActions = [];
+        try {
+            const exports = BunqJSClient.api.customerStatementExport.list(user_id, account_id, options);
+            dispatch(actions.setInfo({ exports, user_id, account_id }));
+        } catch (error) {
+            BunqErrorHandler(batchedActions, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([actions.isNotLoading]));
+        }
+    };
+}
diff --git a/src/store/index.ts b/src/store/index.ts
new file mode 100644
index 00000000..da03a690
--- /dev/null
+++ b/src/store/index.ts
@@ -0,0 +1,160 @@
+import { configureStore, getDefaultMiddleware, Slice, ThunkAction } from "@reduxjs/toolkit";
+import { AnyAction, combineReducers, Dispatch } from "redux";
+import createSagaMiddleware from "redux-saga";
+import { reduxBatch } from "@manaflair/redux-batch";
+
+import accountIdFilter from "./accountIdFilter";
+import accounts from "./accounts";
+import application from "./application";
+import amountFilter from "./amountFilter";
+import bunqMeTab from "./bunqMeTab";
+import bunqMeTabs from "./bunqMeTabs";
+import cardCvc2 from "./cardCvc2";
+import cardIdFilter from "./cardIdFilter";
+import cards from "./cards";
+import categories from "./categories";
+import categoryFilter from "./categoryFilter";
+import categoryRules from "./categoryRules";
+import contacts from "./contacts";
+import dateFilter from "./dateFilter";
+import exportNew from "./exportNew";
+import exports from "./exports";
+import snackbar from "./snackbar";
+
+import general_filter from "~reducers/general_filter";
+import master_card_action_info from "~reducers/master_card_action_info";
+import master_card_actions from "~reducers/master_card_actions";
+import modal from "~reducers/modal";
+import note_texts from "~reducers/note_texts";
+import options from "~reducers/options";
+import oauth from "~reducers/oauth";
+import pagination from "~reducers/pagination";
+import pay from "~reducers/pay";
+import payment_filter from "~reducers/payment_filter";
+import payment_info from "~reducers/payment_info";
+import payments from "~reducers/payments";
+import pending_payments from "~reducers/pending_payments";
+import queue from "~reducers/queue";
+import registration from "~reducers/registration";
+import request_filter from "~reducers/request_filter";
+import request_inquiries from "~reducers/request_inquiries";
+import request_inquiry from "~reducers/request_inquiry";
+import request_inquiry_batches from "~reducers/request_inquiry_batches";
+import request_inquiry_info from "~reducers/request_inquiry_info";
+import request_response from "~reducers/request_response";
+import request_response_info from "~reducers/request_response_info";
+import request_responses from "~reducers/request_responses";
+import savings_goals from "~reducers/savings_goals";
+import scheduled_payments from "~reducers/scheduled_payments";
+import search_filter from "~reducers/search_filter";
+import share_invite_monetary_account_inquiries from "~reducers/share_invite_monetary_account_inquiries";
+import share_invite_monetary_account_inquiry from "~reducers/share_invite_monetary_account_inquiry";
+import share_invite_monetary_account_responses from "~reducers/share_invite_monetary_account_responses";
+import sidebar from "~reducers/sidebar";
+import user from "~reducers/user";
+import users from "~reducers/users";
+
+const slices: {
+    [key: string]: Slice;
+} = {
+    accountIdFilter,
+    accounts,
+    application,
+    amountFilter,
+    bunqMeTab,
+    bunqMeTabs,
+    cardCvc2,
+    cardIdFilter,
+    cards,
+    categories,
+    categoryFilter,
+    categoryRules,
+    contacts,
+    dateFilter,
+    exportNew,
+    exports,
+    snackbar,
+};
+
+const reducer = {
+    accountIdFilter: accountIdFilter.reducer,
+    accounts: accounts.reducer,
+    application: application.reducer,
+    amountFilter: amountFilter.reducer,
+    bunqMeTab: bunqMeTab.reducer,
+    bunqMeTabs: bunqMeTabs.reducer,
+    cardCvc2: cardCvc2.reducer,
+    cardIdFilter: cardIdFilter.reducer,
+    cards: cards.reducer,
+    categories: categories.reducer,
+    categoryFilter: categoryFilter.reducer,
+    categoryRules: categoryRules.reducer,
+    contacts: contacts.reducer,
+    dateFilter: dateFilter.reducer,
+    exportNew: exportNew.reducer,
+    exports: exports.reducer,
+    snackbar: snackbar.reducer,
+
+    general_filter,
+    master_card_action_info,
+    master_card_actions,
+    modal,
+    note_texts,
+    oauth,
+    options,
+    pagination,
+    pay,
+    payment_filter,
+    payment_info,
+    payments,
+    pending_payments,
+    queue,
+    registration,
+    request_filter,
+    request_inquiries,
+    request_inquiry,
+    request_inquiry_batches,
+    request_inquiry_info,
+    request_response,
+    request_response_info,
+    request_responses,
+    savings_goals,
+    scheduled_payments,
+    search_filter,
+    share_invite_monetary_account_inquiries,
+    share_invite_monetary_account_inquiry,
+    share_invite_monetary_account_responses,
+    sidebar,
+    user,
+    users,
+};
+
+const sagaMiddleware = createSagaMiddleware();
+
+const middleware = [...getDefaultMiddleware(), sagaMiddleware];
+
+const store = configureStore({
+    reducer,
+    middleware,
+    devTools: process.env.NODE_ENV !== 'production',
+    enhancers: [reduxBatch as any],
+});
+
+for (const slice of Object.values<any>(slices)) {
+    if (slice.saga) {
+        sagaMiddleware.run(slice.saga);
+    }
+}
+
+// Batched actions
+export type BatchedActions = Array<GenericThunkAction | AnyAction>;
+export type GenericThunkAction = ThunkAction<any, any, any, AnyAction>;
+export type BatchDispatch = (actions: AnyAction[]) => AnyAction[];
+export type ThunkDispatch = (actions: GenericThunkAction | GenericThunkAction[]) => Promise<any>;
+export type MixedMultiDispatch = (actions: BatchedActions) => any;
+
+export type AppDispatch = Dispatch<AnyAction> & BatchDispatch & ThunkDispatch & MixedMultiDispatch;
+
+export type ReduxState = ReturnType<typeof store.getState>;
+
+export default store;
diff --git a/src/store/snackbar/index.ts b/src/store/snackbar/index.ts
new file mode 100644
index 00000000..8285ff9d
--- /dev/null
+++ b/src/store/snackbar/index.ts
@@ -0,0 +1,39 @@
+import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface ISnackbarOpenPayload {
+    message: string;
+    duration?: number;
+}
+
+const openAction = createAction("open");
+const closeAction = createAction("close");
+
+export interface ISnackbarState {
+    message: string;
+    duration: number;
+    snackbarOpen: boolean;
+}
+
+const initialState: ISnackbarState = {
+    message: "",
+    duration: 4000,
+    snackbarOpen: false
+};
+
+const slice = createSlice({
+    name: "snackbar",
+    initialState,
+    reducers: {
+        [openAction.type](state, action: PayloadAction<ISnackbarOpenPayload>) {
+            state.snackbarOpen = true;
+            state.message = action.payload.message;
+            state.duration = action.payload.duration || initialState.duration;
+        },
+        [closeAction.type]() {
+            return initialState;
+        },
+    },
+});
+
+export const { name, reducer, actions, caseReducers } = slice;
+export default { name, reducer, actions, caseReducers };
diff --git a/src/react/Themes/DarkTheme.jsx b/src/themes/DarkTheme.ts
similarity index 100%
rename from src/react/Themes/DarkTheme.jsx
rename to src/themes/DarkTheme.ts
diff --git a/src/react/Themes/DefaultTheme.jsx b/src/themes/DefaultTheme.ts
similarity index 100%
rename from src/react/Themes/DefaultTheme.jsx
rename to src/themes/DefaultTheme.ts
diff --git a/src/types/Category.ts b/src/types/Category.ts
new file mode 100644
index 00000000..d16a6f7f
--- /dev/null
+++ b/src/types/Category.ts
@@ -0,0 +1,9 @@
+interface Category {
+    id: string;
+    label: string;
+    color: string;
+    icon: string;
+    priority: string;
+}
+
+export default Category;
diff --git a/src/react/Types/Event.ts b/src/types/Event.ts
similarity index 100%
rename from src/react/Types/Event.ts
rename to src/types/Event.ts
diff --git a/src/react/Types/RuleCollection.ts b/src/types/RuleCollection.ts
similarity index 99%
rename from src/react/Types/RuleCollection.ts
rename to src/types/RuleCollection.ts
index 5303df3e..b09278ce 100644
--- a/src/react/Types/RuleCollection.ts
+++ b/src/types/RuleCollection.ts
@@ -3,8 +3,8 @@ import TransactionAmountRule from "./Rules/TransactionAmountRule";
 import ValueRule from "./Rules/ValueRule";
 import TypeRule from "./Rules/TypeRule";
 import AccountRule from "./Rules/AccountRule";
-import { generateGUID } from "../Functions/Utils";
-import { RuleTypes, EventObject, EventTypes } from "./Types";
+import { generateGUID } from "~functions/Utils";
+import { EventObject, EventTypes } from "~types/Types";
 
 export type RuleCollectionMatchType = "OR" | "AND";
 
diff --git a/src/react/Types/Rules/AccountRule.ts b/src/types/Rules/AccountRule.ts
similarity index 100%
rename from src/react/Types/Rules/AccountRule.ts
rename to src/types/Rules/AccountRule.ts
diff --git a/src/react/Types/Rules/Rule.ts b/src/types/Rules/Rule.ts
similarity index 100%
rename from src/react/Types/Rules/Rule.ts
rename to src/types/Rules/Rule.ts
diff --git a/src/react/Types/Rules/TransactionAmountRule.ts b/src/types/Rules/TransactionAmountRule.ts
similarity index 100%
rename from src/react/Types/Rules/TransactionAmountRule.ts
rename to src/types/Rules/TransactionAmountRule.ts
diff --git a/src/react/Types/Rules/TypeRule.ts b/src/types/Rules/TypeRule.ts
similarity index 100%
rename from src/react/Types/Rules/TypeRule.ts
rename to src/types/Rules/TypeRule.ts
diff --git a/src/react/Types/Rules/ValueRule.ts b/src/types/Rules/ValueRule.ts
similarity index 100%
rename from src/react/Types/Rules/ValueRule.ts
rename to src/types/Rules/ValueRule.ts
diff --git a/src/react/Types/Types.ts b/src/types/Types.ts
similarity index 99%
rename from src/react/Types/Types.ts
rename to src/types/Types.ts
index 4e0a7289..a55fcb2a 100644
--- a/src/react/Types/Types.ts
+++ b/src/types/Types.ts
@@ -1,4 +1,4 @@
-import Payment from "../Models/Payment";
+import Payment from "~models/Payment";
 
 export type Amount = {
     value: string;
diff --git a/src/react/WebWorkers/crypto.worker.js b/src/webworkers/crypto.worker.js
similarity index 93%
rename from src/react/WebWorkers/crypto.worker.js
rename to src/webworkers/crypto.worker.js
index 376513aa..7bcf7d67 100644
--- a/src/react/WebWorkers/crypto.worker.js
+++ b/src/webworkers/crypto.worker.js
@@ -1,4 +1,4 @@
-import { decryptString, encryptString } from "../Functions/Crypto/Crypto.js";
+import { decryptString, encryptString } from "~functions/Crypto/Crypto";
 
 const defaultError = (error, taskId) => {
     console.error(error);
diff --git a/src/react/WebWorkers/rule_collection_check.worker.js b/src/webworkers/rule_collection_check.worker.js
similarity index 95%
rename from src/react/WebWorkers/rule_collection_check.worker.js
rename to src/webworkers/rule_collection_check.worker.js
index 82ff26d9..79ae6111 100644
--- a/src/react/WebWorkers/rule_collection_check.worker.js
+++ b/src/webworkers/rule_collection_check.worker.js
@@ -1,4 +1,4 @@
-import RuleCollection from "../Types/RuleCollection";
+import RuleCollection from "~types/RuleCollection";
 
 onmessage = e => {
     const ruleCollection = new RuleCollection();
diff --git a/src/react/WebWorkers/stats.worker.js b/src/webworkers/stats.worker.js
similarity index 98%
rename from src/react/WebWorkers/stats.worker.js
rename to src/webworkers/stats.worker.js
index 8ebd6bfe..ea494219 100644
--- a/src/react/WebWorkers/stats.worker.js
+++ b/src/webworkers/stats.worker.js
@@ -12,20 +12,20 @@ import differenceInCalendarMonths from "date-fns/differenceInCalendarMonths";
 import differenceInCalendarYears from "date-fns/differenceInCalendarYears";
 import format from "date-fns/format";
 
-import CategoryHelper from "../Components/Categories/CategoryHelper";
+import CategoryHelper from "~components/Categories/CategoryHelper";
 import {
     bunqMeTabsFilter,
     masterCardActionFilter,
     paymentFilter,
     requestInquiryFilter,
     requestResponseFilter
-} from "../Functions/DataFilters";
+} from "~functions/DataFilters";
 
-import Payment from "../Models/Payment";
-import MasterCardAction from "../Models/MasterCardAction";
-import RequestInquiry from "../Models/RequestInquiry";
-import RequestResponse from "../Models/RequestResponse";
-import BunqMeTab from "../Models/BunqMeTab";
+import Payment from "~models/Payment";
+import MasterCardAction from "~models/MasterCardAction";
+import RequestInquiry from "~models/RequestInquiry";
+import RequestResponse from "~models/RequestResponse";
+import BunqMeTab from "~models/BunqMeTab";
 
 const labelFormat = (date, type = "daily") => {
     switch (type) {
diff --git a/tasks/build_app.js b/tasks/build_app.js
index 5e3dc538..1cf39b28 100644
--- a/tasks/build_app.js
+++ b/tasks/build_app.js
@@ -11,8 +11,8 @@ const destDir = jetpack.cwd("./app");
 
 gulp.task("bundle", () => {
     return Promise.all([
-        bundle(srcDir.path("background.js"), destDir.path("background.js")),
-        bundle(srcDir.path("app.js"), destDir.path("app.js"))
+        bundle(srcDir.path("background.ts"), destDir.path("background.js")),
+        bundle(srcDir.path("app.ts"), destDir.path("app.js"))
     ]);
 });
 
diff --git a/tasks/bundle.js b/tasks/bundle.js
index e24b47a5..35c3e7dd 100644
--- a/tasks/bundle.js
+++ b/tasks/bundle.js
@@ -1,6 +1,7 @@
 const path = require("path");
 const jetpack = require("fs-jetpack");
 const rollup = require("rollup").rollup;
+const typescript = require("@rollup/plugin-typescript");
 
 const nodeBuiltInModules = [
     "assert",
@@ -57,6 +58,7 @@ module.exports = (src, dest, opts) => {
 
     const plugins = [
         // Add rollup plugins here
+        typescript(),
     ];
 
     return rollup({
diff --git a/tasks/generate_icons.js b/tasks/generate_icons.js
index e1f4dad1..13c625d6 100644
--- a/tasks/generate_icons.js
+++ b/tasks/generate_icons.js
@@ -13,7 +13,7 @@ const icons = [];
  */
 const writeIconsFile = () => {
     fs.writeFileSync(
-        `${__dirname}/../src/react/StaticData/Functions/Con`,
+        `${__dirname}/../src/staticdata/Icons.json`,
         JSON.stringify({
             icons: icons
         })
diff --git a/tasks/update_translations.js b/tasks/update_translations.js
index 1138b4de..2018ee58 100644
--- a/tasks/update_translations.js
+++ b/tasks/update_translations.js
@@ -7,7 +7,7 @@ const CSVParse = require("csv-parse/lib/sync");
 const packageInfo = require("../package.json");
 const SUPPORTED_LANGUAGES = packageInfo.supported_languages;
 
-const LOCALES_DIR = path.join(__dirname, "../src/react/Locales");
+const LOCALES_DIR = path.join(__dirname, "../src/locales");
 const LOCALES_CRODWIN_FILE = `${LOCALES_DIR}/Crowdin/import.csv`;
 
 /**
@@ -164,7 +164,7 @@ const start = async () => {
         return output;
     };
 
-    fs.writeFileSync(`${__dirname}/../src/react/Locales/Crowdin/export.csv`, generateCsv());
+    fs.writeFileSync(`${__dirname}/../src/locales/Crowdin/export.csv`, generateCsv());
 };
 
 start()
diff --git a/tsconfig.json b/tsconfig.json
index a8508876..21c267ac 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,6 +5,9 @@
         "noImplicitAny": false,
         "target": "es2017",
         "moduleResolution": "node",
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "resolveJsonModule": true,
         "jsx": "react",
         "allowJs": true,
         "lib": [
@@ -13,7 +16,30 @@
             "es2017",
             "webworker",
             "dom"
-        ]
+        ],
+        "baseUrl": "./",
+        "paths": {
+            "~actions/*": ["src/Actions/*"],
+            "~app": ["src/app"],
+            "~background": ["src/background"],
+            "~env": ["src/env"],
+            "~components/*": ["src/components/*"],
+            "~functions/*": ["src/functions/*"],
+            "~helpers/*": ["src/helpers/*"],
+            "~importwrappers/*": ["src/importwrappers/*"],
+            "~locales/*": ["src/locales/*"],
+            "~menu/*": ["src/menu/*"],
+            "~misc/*": ["src/misc/*"],
+            "~models/*": ["src/models/*"],
+            "~pages/*": ["src/pages/*"],
+            "~reducers/*": ["src/Reducers/*"],
+            "~scss/*": ["src/scss/*"],
+            "~staticdata/*": ["src/staticdata/*"],
+            "~store/*": ["src/store/*"],
+            "~themes/*": ["src/themes/*"],
+            "~types/*": ["src/types/*"],
+            "~webworkers/*": ["src/webworkers/*"]
+        }
     },
     "exclude": [
         "**/*.test.ts"
diff --git a/webpack.config.js b/webpack.config.js
index 52656e5a..004489d4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -8,7 +8,7 @@ const PRODUCTION = process.env.NODE_ENV === "production";
 const DEVELOPMENT = !PRODUCTION;
 const RELEASE_MODE = !!process.env.RELEASE_MODE;
 
-const SRC_DIR = path.resolve(__dirname, "src/react");
+const SRC_DIR = path.resolve(__dirname, "src");
 const BUILD_DIR = path.resolve(__dirname, "app/react");
 const OUTPUT_DIR = "./";
 
@@ -22,7 +22,7 @@ const moduleOptions = {
 
 let config = {
     entry: {
-        bunqDesktop: `${SRC_DIR}/react-app.jsx`
+        bunqDesktop: `${SRC_DIR}/components/react-app.tsx`
     },
     target: "electron-renderer",
     output: {
diff --git a/webpacktools.js b/webpacktools.js
new file mode 100644
index 00000000..712787fb
--- /dev/null
+++ b/webpacktools.js
@@ -0,0 +1,66 @@
+const path = require('path');
+const tsConfig = require('./tsconfig');
+const { resolvePath } = require('babel-plugin-module-resolver');
+
+const getResolverAlias = projectDir => {
+  const tsConfigFile = path.join(projectDir, 'tsconfig.json');
+  const tsConfig = require(tsConfigFile);
+
+  const tsConfigPaths =
+    (tsConfig.compilerOptions && tsConfig.compilerOptions.paths) || {};
+
+  // remove the "/*" at end of tsConfig paths key and values array
+  let pathAlias = Object.keys(tsConfigPaths)
+    .map(tsKey => {
+      const pathArray = tsConfigPaths[tsKey];
+      const key = tsKey.replace('/*', '');
+      // make sure path starts with "./"
+      const paths = pathArray.map(p => `./${p.replace('/*', '')}`);
+      return { key, paths };
+    })
+    .reduce((obj, cur) => {
+      obj[cur.key] = cur.paths; // eslint-disable-line no-param-reassign
+      return obj;
+    }, {});
+
+  return pathAlias;
+};
+
+/**
+ * Also add special resolving of the "src" tsconfig paths.
+ * This is so "src" used within the common projects (eg within components) correctly resolves
+ *
+ * eg In app1 project if you import `@blah/components/Foo` which in turn imports `src/theme`
+ * then for `@blah/components/Foo/Foo.tsx` existing module resolver incorrectly looks for src/theme`
+ * within `app1` folder not `components`
+ *
+ * This now returns:`c:\git\Monorepo\components\src\theme`
+ * Instead of: `c:\git\Monorepo\app1\src\theme`
+ */
+const fixResolvePath = projectDir => (
+  sourcePath,
+  currentFile,
+  opts,
+) => {
+  const ret = resolvePath(sourcePath, currentFile, opts);
+  if (!sourcePath.startsWith('~')) {
+    return ret; // ignore non "src" dirs
+  }
+  if (!sourcePath.includes('/')) {
+    sourcePath += '/index';
+  }
+
+  const aliases = getResolverAlias(projectDir);
+  const sourceParts = sourcePath.split('/');
+  sourceParts[0] = aliases[sourceParts[0]] || sourcePath[0];
+
+  return path.join(
+    projectDir,
+    `./${sourceParts.join('/')}`,
+  );
+};
+
+module.exports = {
+  fixResolvePath,
+  getResolverAlias,
+};
diff --git a/yarn.lock b/yarn.lock
index a1d4d119..05d06c95 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -383,7 +383,7 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.8.3"
 
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.7.4", "@babel/plugin-proposal-nullish-coalescing-operator@^7.8.3":
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz#e4572253fdeed65cddeecfdab3f928afeb2fd5d2"
   integrity sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==
@@ -415,7 +415,7 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
 
-"@babel/plugin-proposal-optional-chaining@^7.7.4", "@babel/plugin-proposal-optional-chaining@^7.8.3":
+"@babel/plugin-proposal-optional-chaining@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.8.3.tgz#ae10b3214cb25f7adb1f3bc87ba42ca10b7e2543"
   integrity sha512-QIoIR9abkVn+seDE3OjA08jWcs3eZ9+wJCKSRgo3WdEU2csFYgdScb+8qHB3+WXsGJD55u+5hWCISI7ejXS+kg==
@@ -964,7 +964,7 @@
     "@babel/plugin-transform-react-jsx-self" "^7.8.3"
     "@babel/plugin-transform-react-jsx-source" "^7.8.3"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.6.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.3.tgz#0811944f73a6c926bb2ad35e918dcc1bfab279f1"
   integrity sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w==
@@ -1187,6 +1187,11 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^13.0.0"
 
+"@manaflair/redux-batch@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@manaflair/redux-batch/-/redux-batch-1.0.0.tgz#3af65dc3ac4ba81cf115c96f9759a6d4077b49f5"
+  integrity sha512-99bfmZ7xX3c8CWQ4C9iFm7Pte0pDfW/XJ3p1KEmjlJjf8nDUbW22n+FhO3buZKhgjoKKB2XGM46SaZFvNeL3QA==
+
 "@mapbox/geojson-area@0.2.2":
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/@mapbox/geojson-area/-/geojson-area-0.2.2.tgz#18d7814aa36bf23fbbcc379f8e26a22927debf10"
@@ -1307,6 +1312,77 @@
     prop-types "^15.6.0"
     react-is "^16.6.3"
 
+"@redux-saga/core@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@redux-saga/core/-/core-1.1.3.tgz#3085097b57a4ea8db5528d58673f20ce0950f6a4"
+  integrity sha512-8tInBftak8TPzE6X13ABmEtRJGjtK17w7VUs7qV17S8hCO5S3+aUTWZ/DBsBJPdE8Z5jOPwYALyvofgq1Ws+kg==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    "@redux-saga/deferred" "^1.1.2"
+    "@redux-saga/delay-p" "^1.1.2"
+    "@redux-saga/is" "^1.1.2"
+    "@redux-saga/symbols" "^1.1.2"
+    "@redux-saga/types" "^1.1.0"
+    redux "^4.0.4"
+    typescript-tuple "^2.2.1"
+
+"@redux-saga/deferred@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@redux-saga/deferred/-/deferred-1.1.2.tgz#59937a0eba71fff289f1310233bc518117a71888"
+  integrity sha512-908rDLHFN2UUzt2jb4uOzj6afpjgJe3MjICaUNO3bvkV/kN/cNeI9PMr8BsFXB/MR8WTAZQq/PlTq8Kww3TBSQ==
+
+"@redux-saga/delay-p@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@redux-saga/delay-p/-/delay-p-1.1.2.tgz#8f515f4b009b05b02a37a7c3d0ca9ddc157bb355"
+  integrity sha512-ojc+1IoC6OP65Ts5+ZHbEYdrohmIw1j9P7HS9MOJezqMYtCDgpkoqB5enAAZrNtnbSL6gVCWPHaoaTY5KeO0/g==
+  dependencies:
+    "@redux-saga/symbols" "^1.1.2"
+
+"@redux-saga/is@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@redux-saga/is/-/is-1.1.2.tgz#ae6c8421f58fcba80faf7cadb7d65b303b97e58e"
+  integrity sha512-OLbunKVsCVNTKEf2cH4TYyNbbPgvmZ52iaxBD4I1fTif4+MTXMa4/Z07L83zW/hTCXwpSZvXogqMqLfex2Tg6w==
+  dependencies:
+    "@redux-saga/symbols" "^1.1.2"
+    "@redux-saga/types" "^1.1.0"
+
+"@redux-saga/symbols@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@redux-saga/symbols/-/symbols-1.1.2.tgz#216a672a487fc256872b8034835afc22a2d0595d"
+  integrity sha512-EfdGnF423glv3uMwLsGAtE6bg+R9MdqlHEzExnfagXPrIiuxwr3bdiAwz3gi+PsrQ3yBlaBpfGLtDG8rf3LgQQ==
+
+"@redux-saga/types@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@redux-saga/types/-/types-1.1.0.tgz#0e81ce56b4883b4b2a3001ebe1ab298b84237204"
+  integrity sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg==
+
+"@reduxjs/toolkit@^1.2.3":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.2.3.tgz#666f6085fab0f10f72dbafb8259496da9bd5914d"
+  integrity sha512-CgeZl41Bmz1rFkASt5gA9egCy9YWXzy485EsEXoGd2Xm1o63UQCxfuCLTH+XlTs25WqtGjSmn5H4xu7n86ytYw==
+  dependencies:
+    immer "^4.0.1"
+    redux "^4.0.0"
+    redux-devtools-extension "^2.13.8"
+    redux-immutable-state-invariant "^2.1.0"
+    redux-thunk "^2.3.0"
+    reselect "^4.0.0"
+
+"@rollup/plugin-typescript@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-2.1.0.tgz#9d4e39cdd152901893285d90b7beb3e2755fb255"
+  integrity sha512-7lXKGY06aofrceVez/YnN2axttFdHSqlUBpCJ6ebzDfxwLDKMgSV5lD4ykBcdgE7aK3egxuLkD/HKyRB5L8Log==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.0"
+    resolve "^1.13.1"
+
+"@rollup/pluginutils@^3.0.0":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.0.4.tgz#3a104a41a90f8d1dcf308e18f8fa402d1cc6576e"
+  integrity sha512-buc0oeq2zqQu2mpMyvZgAaQvitikYjT/4JYhA4EXwxX8/g0ZGHoGiX+0AwmfhrNqH4oJv67gn80sTZFQ/jL1bw==
+  dependencies:
+    estree-walker "^0.6.1"
+
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
@@ -1392,6 +1468,11 @@
     csstype "^2.0.0"
     indefinite-observable "^1.0.1"
 
+"@types/lodash@^4.14.149":
+  version "4.14.149"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.149.tgz#1342d63d948c6062838fbf961012f74d4e638440"
+  integrity sha512-ijGqzZt/b7BfzcK9vTrS6MFljQRPn5BFWOx8oE0GYxribu6uV+aA9zZuXI1zc/etK9E8nrgdoF2+LgUw7+9tJQ==
+
 "@types/moxios@^0.4.9":
   version "0.4.9"
   resolved "https://registry.yarnpkg.com/@types/moxios/-/moxios-0.4.9.tgz#64f5c067e0e0173f72944b785689420e04015b86"
@@ -2220,6 +2301,17 @@ babel-plugin-jest-hoist@^24.9.0:
   dependencies:
     "@types/babel__traverse" "^7.0.6"
 
+babel-plugin-module-resolver@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-4.0.0.tgz#8f3a3d9d48287dc1d3b0d5595113adabd36a847f"
+  integrity sha512-3pdEq3PXALilSJ6dnC4wMWr0AZixHRM4utpdpBR9g5QG7B7JwWyukQv7a9hVxkbGFl+nQbrHDqqQOIBtTXTP/Q==
+  dependencies:
+    find-babel-config "^1.2.0"
+    glob "^7.1.6"
+    pkg-up "^3.1.0"
+    reselect "^4.0.0"
+    resolve "^1.13.1"
+
 babel-plugin-react-html-attrs@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-react-html-attrs/-/babel-plugin-react-html-attrs-2.1.0.tgz#ec92006bca1d07e07d27823afae86dac33fabad5"
@@ -4516,6 +4608,11 @@ estree-walker@^0.2.1:
   resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.2.1.tgz#bdafe8095383d8414d5dc2ecf4c9173b6db9412e"
   integrity sha1-va/oCVOD2EFNXcLs9MkXO225QS4=
 
+estree-walker@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
+  integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
+
 esutils@^2.0.0, esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -4898,6 +4995,14 @@ finalhandler@~1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
+find-babel-config@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/find-babel-config/-/find-babel-config-1.2.0.tgz#a9b7b317eb5b9860cda9d54740a8c8337a2283a2"
+  integrity sha512-jB2CHJeqy6a820ssiqwrKMeyC6nNdmrcgkKWJWmpoxpE8RKciYJXCcXRq1h2AzCo5I5BJeN2tkGEO3hLTuePRA==
+  dependencies:
+    json5 "^0.5.1"
+    path-exists "^3.0.0"
+
 find-cache-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-1.0.0.tgz#9288e3e9e3cc3748717d39eade17cf71fc30ee6f"
@@ -5380,7 +5485,7 @@ glob@^5.0.15:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@~7.1.1:
+glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@~7.1.1:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -5967,6 +6072,11 @@ immediate@~3.0.5:
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
   integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
 
+immer@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-4.0.2.tgz#9ff0fcdf88e06f92618a5978ceecb5884e633559"
+  integrity sha512-Q/tm+yKqnKy4RIBmmtISBlhXuSDrB69e9EKTYiIenIKQkXBQir43w+kN/eGiax3wt1J0O1b2fYcNqLSbEcXA7w==
+
 immutable@^3.8.2:
   version "3.8.2"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
@@ -6079,7 +6189,7 @@ interpret@1.2.0, interpret@^1.1.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
   integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
 
-invariant@^2.2.2, invariant@^2.2.4:
+invariant@^2.1.0, invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -7040,7 +7150,7 @@ json-stable-stringify-without-jsonify@^1.0.1:
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
   integrity sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=
 
-json-stringify-safe@~5.0.1:
+json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
   integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
@@ -7052,7 +7162,7 @@ json5@2.x, json5@^2.1.0:
   dependencies:
     minimist "^1.2.0"
 
-json5@^0.5.0:
+json5@^0.5.0, json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
   integrity sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=
@@ -8953,6 +9063,13 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
+pkg-up@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
+  integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
+  dependencies:
+    find-up "^3.0.0"
+
 plist@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/plist/-/plist-3.0.1.tgz#a9b931d17c304e8912ef0ba3bdd6182baf2e1f8c"
@@ -10039,6 +10156,11 @@ reduce-function-call@^1.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
+redux-devtools-extension@^2.13.8:
+  version "2.13.8"
+  resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
+  integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==
+
 redux-form@^7.4.2:
   version "7.4.2"
   resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-7.4.2.tgz#d6061088fb682eb9fc5fb9749bd8b102f03154b0"
@@ -10053,6 +10175,14 @@ redux-form@^7.4.2:
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
 
+redux-immutable-state-invariant@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/redux-immutable-state-invariant/-/redux-immutable-state-invariant-2.1.0.tgz#308fd3cc7415a0e7f11f51ec997b6379c7055ce1"
+  integrity sha512-3czbDKs35FwiBRsx/3KabUk5zSOoTXC+cgVofGkpBNv3jQcqIe5JrHcF5AmVt7B/4hyJ8MijBIpCJ8cife6yJg==
+  dependencies:
+    invariant "^2.1.0"
+    json-stringify-safe "^5.0.1"
+
 redux-mock-store@^1.5.1:
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/redux-mock-store/-/redux-mock-store-1.5.4.tgz#90d02495fd918ddbaa96b83aef626287c9ab5872"
@@ -10060,7 +10190,14 @@ redux-mock-store@^1.5.1:
   dependencies:
     lodash.isplainobject "^4.0.6"
 
-redux-thunk@^2.2.0:
+redux-saga@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-1.1.3.tgz#9f3e6aebd3c994bbc0f6901a625f9a42b51d1112"
+  integrity sha512-RkSn/z0mwaSa5/xH/hQLo8gNf4tlvT18qXDNvedihLcfzh+jMchDgaariQoehCpgRltEm4zHKJyINEz6aqswTw==
+  dependencies:
+    "@redux-saga/core" "^1.1.3"
+
+redux-thunk@^2.2.0, redux-thunk@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
   integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
@@ -10075,6 +10212,14 @@ redux@^3.7.2:
     loose-envify "^1.1.0"
     symbol-observable "^1.0.3"
 
+redux@^4.0.0, redux@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
+  integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
+  dependencies:
+    loose-envify "^1.4.0"
+    symbol-observable "^1.2.0"
+
 reflect.ownkeys@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz#749aceec7f3fdf8b63f927a04809e90c5c0b3460"
@@ -10326,6 +10471,11 @@ require-main-filename@^2.0.0:
   resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
   integrity sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
 
+reselect@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
+  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
+
 resize-observer-polyfill@^1.3.1, resize-observer-polyfill@^1.5.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
@@ -10380,7 +10530,7 @@ resolve@1.1.7, resolve@1.1.x:
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
   integrity sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=
 
-resolve@1.x, resolve@^1.1.5, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.3.2, resolve@^1.4.0, resolve@^1.8.1:
+resolve@1.x, resolve@^1.1.5, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.13.1, resolve@^1.3.2, resolve@^1.4.0, resolve@^1.8.1:
   version "1.14.2"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.14.2.tgz#dbf31d0fa98b1f29aa5169783b9c290cb865fea2"
   integrity sha512-EjlOBLBO1kxsUxsKjLt7TAECyKW6fOh1VRkykQkKGzcBbjjPIxBqGh0jf7GJ3k/f5mxMqW3htMD3WdTUVtW8HQ==
@@ -11340,7 +11490,7 @@ svgo@^0.7.0:
     sax "~1.2.1"
     whet.extend "~0.9.9"
 
-symbol-observable@1.2.0, symbol-observable@^1.0.3, symbol-observable@^1.0.4, symbol-observable@^1.1.0:
+symbol-observable@1.2.0, symbol-observable@^1.0.3, symbol-observable@^1.0.4, symbol-observable@^1.1.0, symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
@@ -11726,6 +11876,25 @@ typeface-roboto@^0.0.54:
   resolved "https://registry.yarnpkg.com/typeface-roboto/-/typeface-roboto-0.0.54.tgz#8f02c9a18d1cfa7f49381a6ff0d21ff061f38ad2"
   integrity sha512-sOFA1FXgP0gOgBYlS6irwq6hHYA370KE3dPlgYEJHL3PJd5X8gQE0RmL79ONif6fL5JZuGDj+rtOrFeOqz5IZQ==
 
+typescript-compare@^0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/typescript-compare/-/typescript-compare-0.0.2.tgz#7ee40a400a406c2ea0a7e551efd3309021d5f425"
+  integrity sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA==
+  dependencies:
+    typescript-logic "^0.0.0"
+
+typescript-logic@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/typescript-logic/-/typescript-logic-0.0.0.tgz#66ebd82a2548f2b444a43667bec120b496890196"
+  integrity sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q==
+
+typescript-tuple@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/typescript-tuple/-/typescript-tuple-2.2.1.tgz#7d9813fb4b355f69ac55032e0363e8bb0f04dad2"
+  integrity sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q==
+  dependencies:
+    typescript-compare "^0.0.2"
+
 typescript@^3.0.1:
   version "3.7.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae"

From 2f6a25454bab2f08bf48fba113857d8fb7fe578a Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 13:21:02 +0100
Subject: [PATCH 02/26] refactor: Stop passing down BunqJSClient through props

---
 src/Actions/master_card_action_info.js        |   5 +-
 src/Actions/master_card_actions.js            |  12 +-
 src/Actions/note_texts.js                     |  22 +-
 src/Actions/pay.js                            |  18 +-
 src/Actions/payment_info.js                   |   3 +-
 src/Actions/payments.js                       |   8 +-
 src/Actions/pending_payments.js               |  17 +-
 src/Actions/registration.js                   |  23 +-
 src/Actions/request_inquiries.js              |   6 +-
 src/Actions/request_inquiry.js                |  10 +-
 src/Actions/request_inquiry_batches.js        |   6 +-
 src/Actions/request_inquiry_info.js           |   3 +-
 src/Actions/request_response.js               |  14 +-
 src/Actions/request_response_info.js          |   3 +-
 src/Actions/request_responses.js              |   6 +-
 src/Actions/scheduled_payments.js             |   5 +-
 ...share_invite_monetary_account_inquiries.js |   7 +-
 .../share_invite_monetary_account_inquiry.js  |  11 +-
 .../share_invite_monetary_account_response.js |   4 +-
 ...share_invite_monetary_account_responses.js |   9 +-
 src/Actions/user.js                           |   5 +-
 src/Actions/users.js                          |   3 +-
 src/Reducers/general_filter.js                |   5 +-
 src/Reducers/master_card_actions.js           |  21 +-
 src/Reducers/payments.js                      |  21 +-
 src/Reducers/pending_payments.js              |  59 +-
 src/Reducers/queue.js                         |   2 +-
 src/Reducers/request_inquiries.js             |  20 +-
 src/Reducers/request_inquiry_batches.js       |  20 +-
 src/Reducers/request_responses.js             |  20 +-
 src/Reducers/savings_goals.js                 |  12 +-
 ...share_invite_monetary_account_inquiries.js |  20 +-
 ...share_invite_monetary_account_responses.js |  17 +-
 src/app.ts                                    |   2 +-
 src/components/AccountCard.tsx                |  24 +-
 .../AccountAvatarCircularProgress.tsx         |  15 +-
 src/components/AccountList/AccountList.tsx    |  58 +-
 .../AccountList/AccountListItem.tsx           |  22 +-
 .../AccountList/AccountListItemChip.tsx       |   2 -
 src/components/App.tsx                        |   1 -
 .../AttachmentImage/AttachmentImage.tsx       |   5 +-
 src/components/BunqMeTabList.tsx              |   6 +-
 src/components/Categories/CategoryChips.tsx   |  15 +-
 src/components/Categories/CategoryEditor.tsx  |   1 -
 src/components/Categories/CategoryIcons.tsx   |  34 +-
 .../Categories/CategorySelector.tsx           |  15 +-
 .../Categories/CategorySelectorDialog.tsx     |  10 +-
 src/components/CombinedList/CombinedList.tsx  |  55 +-
 src/components/CombinedList/EventData.tsx     |  10 +-
 src/components/FileUpload/FilePicker.tsx      |  10 +-
 .../FileUpload/UploadFullscreen.tsx           |  26 +-
 .../FilterComponents/AccountSelection.tsx     |  26 +-
 .../FilterComponents/AmountFilter.tsx         |  25 +-
 .../FilterComponents/CardSelection.tsx        |  11 +-
 .../FilterComponents/CategorySelection.tsx    |  24 +-
 .../FilterComponents/ClearFilter.tsx          |  52 +-
 .../FilterComponents/FilterDrawer.tsx         |  39 +-
 .../FilterComponents/SearchFilter.tsx         |  28 +-
 .../FormFields/AccountSelectorDialog.tsx      |  38 +-
 src/components/FormFields/ColorPicker.tsx     |  27 +-
 .../FormFields/EmailSuggestions.tsx           |  14 +-
 src/components/FormFields/TargetSelection.tsx |   1 -
 src/components/GeoLocation/GeoLocationMap.tsx |  23 +-
 .../GeoLocation/GeoLocationView.tsx           |  20 +-
 src/components/Layout.tsx                     |  10 +-
 .../ListItems/BunqMeTabListItem.tsx           |   1 -
 .../ListItems/MasterCardActionListItem.tsx    |   1 -
 src/components/ListItems/PaymentListItem.tsx  |   1 -
 .../ListItems/RequestInquiryBatchListItem.tsx |   3 +-
 .../ListItems/RequestInquiryListItem.tsx      |   2 +-
 .../ListItems/RequestResponseListItem.tsx     |   1 -
 ...reInviteMonetaryAccountInquiryListItem.tsx |   7 +-
 ...eInviteMonetaryAccountResponseListItem.tsx |  13 +-
 src/components/NoteTexts/NoteTextForm.tsx     |   8 +-
 src/components/QR/AccountQRFullscreen.tsx     |   1 -
 src/components/Queue/QueueManager.tsx         |   2 +
 src/components/RuleCollectionChecker.tsx      |  10 +-
 src/components/TransactionHeader.tsx          |   2 -
 src/functions/BunqErrorHandler.ts             |   7 +-
 src/models/MonetaryAccount.ts                 |   7 +-
 src/models/RuleCollection.ts                  | 547 ++++++++++++++++++
 src/pages/AccountInfo.tsx                     |  36 +-
 src/pages/AddAccount.tsx                      |   2 +-
 src/pages/BunqMeTab/BunqMeTab.tsx             |   7 +-
 src/pages/BunqMeTab/BunqMeTabForm.tsx         |   3 +-
 src/pages/Cards/Cards.tsx                     |   3 -
 src/pages/Connect/Connect.tsx                 |   9 +-
 src/pages/Connect/ConnectListItem.tsx         |   6 +-
 src/pages/Contacts/Contacts.tsx               |   8 +-
 src/pages/Dashboard/AddMoneyButton.tsx        |   2 +-
 src/pages/Dashboard/Dashboard.tsx             |   8 +-
 src/pages/Exports.tsx                         |   7 +-
 src/pages/Login/Login.tsx                     |   2 -
 src/pages/MasterCardActionInfo.tsx            |   5 +-
 src/pages/Pay/Pay.tsx                         |   9 +-
 src/pages/PaymentInfo.tsx                     |   5 +-
 src/pages/PendingPayments/PendingPayments.tsx |  11 +-
 src/pages/Profile/Profile.tsx                 |   8 +-
 src/pages/RequestInquiry/RequestInquiry.tsx   |   6 +-
 src/pages/RequestInquiry/SplitAmountForm.tsx  |   3 +-
 src/pages/RequestInquiry/SplitAmountItem.tsx  |   4 +-
 src/pages/RequestInquiryInfo.tsx              |   7 +-
 .../RequestResponseInfo.tsx                   |  10 +-
 src/pages/RulePage/RuleCreator.tsx            |   1 -
 src/pages/RulePage/RulePage.tsx               |   1 -
 .../RuleTypeItems/AccountRuleItem.tsx         |   1 -
 .../ScheduledPaymentItem.tsx                  |   4 +-
 .../ScheduledPayments/ScheduledPayments.tsx   |   5 +-
 .../ScheduledPaymentsEditDialog.tsx           |   6 +-
 src/pages/Stats/Stats.tsx                     |   2 +-
 src/store/accounts/index.ts                   |  35 +-
 src/store/accounts/thunks.ts                  |  40 +-
 src/store/bunqMeTab/thunks.ts                 |  11 +-
 src/store/bunqMeTabs/index.ts                 |  27 +-
 src/store/bunqMeTabs/thunks.ts                |   8 +-
 src/store/cardCvc2/thunks.ts                  |   3 +-
 src/store/cards/thunks.ts                     |   3 +-
 src/store/categoryRules/index.ts              |  12 +-
 src/store/contacts/index.ts                   |  31 +-
 src/store/contacts/thunks.ts                  |   9 +-
 src/store/exportNew/thunks.ts                 |   1 -
 src/store/exports/thunks.ts                   |   1 -
 src/store/index.ts                            |  11 +-
 src/types/MonetaryAccount.ts                  |  33 ++
 src/types/RuleCollection.ts                   | 538 +----------------
 125 files changed, 1393 insertions(+), 1230 deletions(-)
 create mode 100644 src/models/RuleCollection.ts
 create mode 100644 src/types/MonetaryAccount.ts

diff --git a/src/Actions/master_card_action_info.js b/src/Actions/master_card_action_info.js
index b9abea1c..9a1cc95a 100644
--- a/src/Actions/master_card_action_info.js
+++ b/src/Actions/master_card_action_info.js
@@ -26,8 +26,9 @@ export function masterCardActionInfoClear() {
     return { type: "MASTER_CARD_ACTION_INFO_CLEAR" };
 }
 
-export function masterCardActionInfoUpdate(BunqJSClient, user_id, account_id, master_card_action_id) {
+export function masterCardActionInfoUpdate(user_id, account_id, master_card_action_id) {
     const failedMessage = window.t("We failed to load the mastercard payment information");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(masterCardActionInfoLoading());
@@ -37,7 +38,7 @@ export function masterCardActionInfoUpdate(BunqJSClient, user_id, account_id, ma
                 const masterCardActionInfo = new MasterCardAction(masterCardAction);
 
                 // update this item in the list and the stored data
-                dispatch(masterCardActionsSetInfo([masterCardActionInfo], parseInt(account_id), false, BunqJSClient));
+                dispatch(masterCardActionsSetInfo([masterCardActionInfo], parseInt(account_id), false));
 
                 dispatch(masterCardActionSetInfo(masterCardActionInfo, parseInt(account_id), master_card_action_id));
                 dispatch(masterCardActionInfoNotLoading());
diff --git a/src/Actions/master_card_actions.js b/src/Actions/master_card_actions.js
index be464cd3..03ec4bd3 100644
--- a/src/Actions/master_card_actions.js
+++ b/src/Actions/master_card_actions.js
@@ -2,20 +2,21 @@ import MasterCardAction from "~models/MasterCardAction";
 
 export const STORED_MASTER_CARD_ACTIONS = "BUNQDESKTOP_STORED_MASTER_CARD_ACTIONS";
 
-export function masterCardActionsSetInfo(masterCardActions, account_id, resetOldItems = false, BunqJSClient = false) {
+export function masterCardActionsSetInfo(masterCardActions, account_id, resetOldItems = false) {
     const type = resetOldItems ? "MASTER_CARD_ACTIONS_SET_INFO" : "MASTER_CARD_ACTIONS_UPDATE_INFO";
 
     return {
         type: type,
         payload: {
-            BunqJSClient,
             masterCardActions,
             account_id
         }
     };
 }
 
-export function loadStoredMasterCardActions(BunqJSClient) {
+export function loadStoredMasterCardActions() {
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
+
     return dispatch => {
         dispatch(masterCardActionsLoading());
         const BunqDesktopClient = window.BunqDesktopClient;
@@ -35,7 +36,6 @@ export function loadStoredMasterCardActions(BunqJSClient) {
 }
 
 export function masterCardActionsUpdate(
-    BunqJSClient,
     userId,
     accountId,
     options = {
@@ -48,13 +48,13 @@ export function masterCardActionsUpdate(
 
     return dispatch => {
         dispatch(masterCardActionsLoading());
-        BunqJSClient.api.masterCardAction
+        window.BunqDesktopClient.BunqJSClient.api.masterCardAction
             .list(userId, accountId, options)
             .then(masterCardActions => {
                 // turn plain objects into Model objects
                 const masterCardActionsNew = masterCardActions.map(item => new MasterCardAction(item));
 
-                dispatch(masterCardActionsSetInfo(masterCardActionsNew, accountId, false, BunqJSClient));
+                dispatch(masterCardActionsSetInfo(masterCardActionsNew, accountId, false));
                 dispatch(masterCardActionsNotLoading());
             })
             .catch(error => {
diff --git a/src/Actions/note_texts.js b/src/Actions/note_texts.js
index 5804a177..a8788df8 100644
--- a/src/Actions/note_texts.js
+++ b/src/Actions/note_texts.js
@@ -13,16 +13,16 @@ export function noteTextsSetInfo(noteTexts, event_type, user_id, account_id, eve
     };
 }
 
-export function notesTextsAddNote(BunqJSClient, event_type, user_id, account_id, event_id, content) {
+export function notesTextsAddNote(event_type, user_id, account_id, event_id, content) {
     const failedMessage = window.t("We failed to add a new note");
 
     return dispatch => {
         dispatch(noteTextsLoading());
-        BunqJSClient.api.noteText
+        window.BunqDesktopClient.BunqJSClient.api.noteText
             .post(event_type, user_id, account_id, event_id, content)
             .then(() => {
                 // update the notes
-                dispatch(noteTextsUpdate(BunqJSClient, event_type, user_id, account_id, event_id));
+                dispatch(noteTextsUpdate(event_type, user_id, account_id, event_id));
                 dispatch(noteTextsNotLoading());
             })
             .catch(error => {
@@ -33,16 +33,16 @@ export function notesTextsAddNote(BunqJSClient, event_type, user_id, account_id,
     };
 }
 
-export function notesTextsUpdateNote(BunqJSClient, event_type, user_id, account_id, event_id, content, note_id) {
+export function notesTextsUpdateNote(event_type, user_id, account_id, event_id, content, note_id) {
     const failedMessage = window.t("We failed to update the note");
 
     return dispatch => {
         dispatch(noteTextsLoading());
-        BunqJSClient.api.noteText
+        window.BunqDesktopClient.BunqJSClient.api.noteText
             .put(event_type, user_id, account_id, event_id, content, note_id)
             .then(() => {
                 // update the notes
-                dispatch(noteTextsUpdate(BunqJSClient, event_type, user_id, account_id, event_id));
+                dispatch(noteTextsUpdate(event_type, user_id, account_id, event_id));
                 dispatch(noteTextsNotLoading());
             })
             .catch(error => {
@@ -52,16 +52,16 @@ export function notesTextsUpdateNote(BunqJSClient, event_type, user_id, account_
     };
 }
 
-export function notesTextsDeleteNote(BunqJSClient, event_type, user_id, account_id, event_id, note_id) {
+export function notesTextsDeleteNote(event_type, user_id, account_id, event_id, note_id) {
     const failedMessage = window.t("We failed to delete the note");
 
     return dispatch => {
         dispatch(noteTextsLoading());
-        BunqJSClient.api.noteText
+        window.BunqDesktopClient.BunqJSClient.api.noteText
             .delete(event_type, user_id, account_id, event_id, note_id)
             .then(() => {
                 // update the notes
-                dispatch(noteTextsUpdate(BunqJSClient, event_type, user_id, account_id, event_id));
+                dispatch(noteTextsUpdate(event_type, user_id, account_id, event_id));
                 dispatch(noteTextsNotLoading());
             })
             .catch(error => {
@@ -71,12 +71,12 @@ export function notesTextsDeleteNote(BunqJSClient, event_type, user_id, account_
     };
 }
 
-export function noteTextsUpdate(BunqJSClient, event_type, user_id, account_id, event_id) {
+export function noteTextsUpdate(event_type, user_id, account_id, event_id) {
     const failedMessage = window.t("We failed to load your notes");
 
     return dispatch => {
         dispatch(noteTextsLoading());
-        BunqJSClient.api.noteText
+        window.BunqDesktopClient.BunqJSClient.api.noteText
             .list(event_type, user_id, account_id, event_id)
             .then(noteTexts => {
                 dispatch(noteTextsSetInfo(noteTexts, event_type, user_id, account_id, event_id));
diff --git a/src/Actions/pay.js b/src/Actions/pay.js
index 7b2163ad..f91f49fc 100644
--- a/src/Actions/pay.js
+++ b/src/Actions/pay.js
@@ -5,11 +5,12 @@ import { shareInviteMonetaryAccountResponsesInfoUpdate } from "./share_invite_mo
 import { actions as snackbarActions } from "~store/snackbar";
 import { accountsUpdate } from "~store/accounts/thunks";
 
-export function paySend(BunqJSClient, userId, accountId, description, amount, targets, draft = false) {
+export function paySend(userId, accountId, description, amount, targets, draft = false) {
     const failedMessage = window.t("We received the following error while sending your payment");
     const successMessage1 = window.t("Draft payment successfully created!");
     const successMessage2 = window.t("Payments sent successfully!");
     const successMessage3 = window.t("Payment sent successfully!");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(payLoading());
@@ -34,8 +35,8 @@ export function paySend(BunqJSClient, userId, accountId, description, amount, ta
                 dispatch(snackbarActions.open({ message: notification }));
 
                 // update the payments, accounts and share list
-                dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(BunqJSClient, userId));
-                dispatch(accountsUpdate(BunqJSClient, userId));
+                dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(userId));
+                dispatch(accountsUpdate(userId));
 
                 dispatch(payNotLoading());
             })
@@ -46,10 +47,11 @@ export function paySend(BunqJSClient, userId, accountId, description, amount, ta
     };
 }
 
-export function paySchedule(BunqJSClient, userId, accountId, description, amount, targets, schedule) {
+export function paySchedule(userId, accountId, description, amount, targets, schedule) {
     const failedMessage = window.t("We received the following error while sending your payment");
     const successMessage1 = window.t("Payment was successfully scheduled!");
     const successMessage2 = window.t("Payments were successfully scheduled!");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(payLoading());
@@ -78,10 +80,10 @@ export function paySchedule(BunqJSClient, userId, accountId, description, amount
                 dispatch(snackbarActions.open({ message: notification }));
 
                 // update the payments, accounts and share list
-                dispatch(paymentInfoUpdate(BunqJSClient, userId, accountId));
-                dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(BunqJSClient, userId, accountId));
-                dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(BunqJSClient, userId));
-                dispatch(accountsUpdate(BunqJSClient, userId));
+                dispatch(paymentInfoUpdate(userId, accountId));
+                dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(userId, accountId));
+                dispatch(shareInviteMonetaryAccountResponsesInfoUpdate( userId));
+                dispatch(accountsUpdate(userId));
 
                 dispatch(payNotLoading());
             })
diff --git a/src/Actions/payment_info.js b/src/Actions/payment_info.js
index ff63e8f5..0856401d 100644
--- a/src/Actions/payment_info.js
+++ b/src/Actions/payment_info.js
@@ -14,8 +14,9 @@ export function paymentInfoSetInfo(payment, account_id, payment_id) {
     };
 }
 
-export function paymentsUpdate(BunqJSClient, user_id, account_id, payment_id) {
+export function paymentsUpdate(user_id, account_id, payment_id) {
     const failedMessage = window.t("We failed to load the payment info");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(paymentInfoLoading());
diff --git a/src/Actions/payments.js b/src/Actions/payments.js
index 3540231e..3754756d 100644
--- a/src/Actions/payments.js
+++ b/src/Actions/payments.js
@@ -11,14 +11,15 @@ export function paymentsSetInfo(payments, account_id, resetOldItems = false, Bun
     return {
         type: type,
         payload: {
-            BunqJSClient,
             payments,
             account_id
         }
     };
 }
 
-export function loadStoredPayments(BunqJSClient) {
+export function loadStoredPayments() {
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
+
     return dispatch => {
         dispatch(paymentsLoading());
         const BunqDesktopClient = window.BunqDesktopClient;
@@ -39,7 +40,6 @@ export function loadStoredPayments(BunqJSClient) {
 }
 
 export function paymentInfoUpdate(
-    BunqJSClient,
     user_id,
     account_id,
     options = {
@@ -59,7 +59,7 @@ export function paymentInfoUpdate(
                 // turn plain objects into Model objects
                 const paymentsNew = payments.map(item => new Payment(item)).filter(paymentApiFilter);
 
-                dispatch(paymentsSetInfo(paymentsNew, account_id, false, BunqJSClient));
+                dispatch(paymentsSetInfo(paymentsNew, account_id, false));
                 dispatch(paymentsNotLoading());
             })
             .catch(error => {
diff --git a/src/Actions/pending_payments.js b/src/Actions/pending_payments.js
index 5e766728..07bb0e93 100644
--- a/src/Actions/pending_payments.js
+++ b/src/Actions/pending_payments.js
@@ -1,6 +1,6 @@
 export const PENDING_PAYMENTS_LOCATION = "BUNQDESKTOP_STORED_PENDING_PAYMENTS";
 
-export function loadPendingPayments(BunqJSClient) {
+export function loadPendingPayments() {
     return dispatch => {
         const BunqDesktopClient = window.BunqDesktopClient;
         BunqDesktopClient.storeDecrypt(PENDING_PAYMENTS_LOCATION)
@@ -13,53 +13,48 @@ export function loadPendingPayments(BunqJSClient) {
     };
 }
 
-export function pendingPaymentsSetPayments(BunqJSClient, pendingPayments) {
+export function pendingPaymentsSetPayments(pendingPayments) {
     return {
         type: "PENDING_PAYMENTS_SET_PAYMENTS",
         payload: {
-            BunqJSClient,
             pending_payments: pendingPayments
         }
     };
 }
 
-export function pendingPaymentsAddPayments(BunqJSClient, accountId, pendingPayments) {
+export function pendingPaymentsAddPayments(accountId, pendingPayments) {
     return {
         type: "PENDING_PAYMENTS_ADD_PAYMENTS",
         payload: {
-            BunqJSClient,
             account_id: accountId,
             pending_payments: pendingPayments
         }
     };
 }
 
-export function pendingPaymentsAddPayment(BunqJSClient, accountId, pendingPayment) {
+export function pendingPaymentsAddPayment(accountId, pendingPayment) {
     return {
         type: "PENDING_PAYMENTS_ADD_PAYMENT",
         payload: {
-            BunqJSClient,
             account_id: accountId,
             pending_payment: pendingPayment
         }
     };
 }
 
-export function pendingPaymentsClearAccount(BunqJSClient, accountId) {
+export function pendingPaymentsClearAccount(accountId) {
     return {
         type: "PENDING_PAYMENTS_CLEAR_ACCOUNT",
         payload: {
-            BunqJSClient,
             account_id: accountId
         }
     };
 }
 
-export function pendingPaymentsRemovePayment(BunqJSClient, pendingPaymentId) {
+export function pendingPaymentsRemovePayment(pendingPaymentId) {
     return {
         type: "PENDING_PAYMENTS_REMOVE_PAYMENT",
         payload: {
-            BunqJSClient,
             pending_payment_id: pendingPaymentId
         }
     };
diff --git a/src/Actions/registration.js b/src/Actions/registration.js
index 178d700f..e2b27c33 100644
--- a/src/Actions/registration.js
+++ b/src/Actions/registration.js
@@ -366,22 +366,21 @@ export function registrationNotLoading() {
 
 export function registrationLoadStoredData() {
     const BunqDesktopClient = window.BunqDesktopClient;
-    const BunqJSClient = BunqDesktopClient.BunqJSClient;
     return dispatch => {
         // skip if no apiKey is set
         if (!BunqDesktopClient.apiKey) return;
 
-        dispatch(loadStoredAccounts(BunqJSClient));
-        dispatch(loadStoredContacts(BunqJSClient));
-        dispatch(loadPendingPayments(BunqJSClient));
-        dispatch(loadStoredPayments(BunqJSClient));
-        dispatch(loadStoredBunqMeTabs(BunqJSClient));
-        dispatch(loadStoredMasterCardActions(BunqJSClient));
-        dispatch(loadStoredRequestInquiries(BunqJSClient));
-        dispatch(loadStoredrequestInquiryBatches(BunqJSClient));
-        dispatch(loadStoredRequestResponses(BunqJSClient));
-        dispatch(loadStoredShareInviteMonetaryAccountResponses(BunqJSClient));
-        dispatch(loadStoredShareInviteBankInquiries(BunqJSClient));
+        dispatch(loadStoredAccounts());
+        dispatch(loadStoredContacts());
+        dispatch(loadPendingPayments());
+        dispatch(loadStoredPayments());
+        dispatch(loadStoredBunqMeTabs());
+        dispatch(loadStoredMasterCardActions());
+        dispatch(loadStoredRequestInquiries());
+        dispatch(loadStoredrequestInquiryBatches());
+        dispatch(loadStoredRequestResponses());
+        dispatch(loadStoredShareInviteMonetaryAccountResponses());
+        dispatch(loadStoredShareInviteBankInquiries());
     };
 }
 
diff --git a/src/Actions/request_inquiries.js b/src/Actions/request_inquiries.js
index d10fb924..0fa596ae 100644
--- a/src/Actions/request_inquiries.js
+++ b/src/Actions/request_inquiries.js
@@ -9,14 +9,15 @@ export function requestInquiriesSetInfo(requestInquiries, account_id, resetOldIt
     return {
         type: type,
         payload: {
-            BunqJSClient,
             requestInquiries,
             account_id
         }
     };
 }
 
-export function loadStoredRequestInquiries(BunqJSClient) {
+export function loadStoredRequestInquiries() {
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
+
     return dispatch => {
         dispatch(requestInquiriesLoading());
         const BunqDesktopClient = window.BunqDesktopClient;
@@ -35,7 +36,6 @@ export function loadStoredRequestInquiries(BunqJSClient) {
 }
 
 export function requestInquiriesUpdate(
-    BunqJSClient,
     userId,
     accountId,
     options = {
diff --git a/src/Actions/request_inquiry.js b/src/Actions/request_inquiry.js
index a062b19a..99ced0b9 100644
--- a/src/Actions/request_inquiry.js
+++ b/src/Actions/request_inquiry.js
@@ -3,9 +3,10 @@ import { requestInquiryUpdate } from "./request_inquiry_info";
 import { requestInquiryBatchesUpdate } from "./request_inquiry_batches";
 import { actions as snackbarActions } from "~store/snackbar";
 
-export function requestInquirySend(BunqJSClient, userId, accountId, requestInquiries) {
+export function requestInquirySend(userId, accountId, requestInquiries) {
     const failedMessage = window.t("We received the following error while sending your request");
     const successMessage = window.t("Request was sent successfully!");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(requestInquiryLoading());
@@ -23,9 +24,10 @@ export function requestInquirySend(BunqJSClient, userId, accountId, requestInqui
     };
 }
 
-export function requestInquiryCancel(BunqJSClient, userId, accountId, requestInquiryId) {
+export function requestInquiryCancel(userId, accountId, requestInquiryId) {
     const failedMessage = window.t("We received the following error while trying to cancel your request inquiry");
     const successMessage = window.t("Request was cancelled successfully!");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(requestInquiryLoading());
@@ -36,8 +38,8 @@ export function requestInquiryCancel(BunqJSClient, userId, accountId, requestInq
                 dispatch(requestInquiryNotLoading());
 
                 // update the information page
-                dispatch(requestInquiryUpdate(BunqJSClient, userId, accountId, requestInquiryId));
-                dispatch(requestInquiryBatchesUpdate(BunqJSClient, userId, accountId));
+                dispatch(requestInquiryUpdate(userId, accountId, requestInquiryId));
+                dispatch(requestInquiryBatchesUpdate(userId, accountId));
             })
             .catch(error => {
                 dispatch(requestInquiryNotLoading());
diff --git a/src/Actions/request_inquiry_batches.js b/src/Actions/request_inquiry_batches.js
index 856e7112..b1e72c82 100644
--- a/src/Actions/request_inquiry_batches.js
+++ b/src/Actions/request_inquiry_batches.js
@@ -14,14 +14,15 @@ export function requestInquiryBatchesSetInfo(
     return {
         type: type,
         payload: {
-            BunqJSClient,
             requestInquiryBatches,
             account_id
         }
     };
 }
 
-export function loadStoredrequestInquiryBatches(BunqJSClient) {
+export function loadStoredrequestInquiryBatches() {
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
+
     return dispatch => {
         dispatch(requestInquiryBatchesLoading());
         const BunqDesktopClient = window.BunqDesktopClient;
@@ -40,7 +41,6 @@ export function loadStoredrequestInquiryBatches(BunqJSClient) {
 }
 
 export function requestInquiryBatchesUpdate(
-    BunqJSClient,
     user_id,
     accountId,
     options = {
diff --git a/src/Actions/request_inquiry_info.js b/src/Actions/request_inquiry_info.js
index 6c1239e6..08055dd9 100644
--- a/src/Actions/request_inquiry_info.js
+++ b/src/Actions/request_inquiry_info.js
@@ -14,8 +14,9 @@ export function requestInquirySetInfo(request_inquiry_info, account_id, request_
     };
 }
 
-export function requestInquiryUpdate(BunqJSClient, user_id, account_id, request_inquiry_id) {
+export function requestInquiryUpdate(user_id, account_id, request_inquiry_id) {
     const failedMessage = window.t("We failed to load the request information");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(requestInquiryLoading());
diff --git a/src/Actions/request_response.js b/src/Actions/request_response.js
index d6ca8c18..b273da22 100644
--- a/src/Actions/request_response.js
+++ b/src/Actions/request_response.js
@@ -6,7 +6,6 @@ import { actions as snackbarActions } from "~store/snackbar";
 
 // Disabled until after 0.7 release
 export function requestResponseAccept(
-    BunqJSClient,
     userId,
     accountId,
     requestResponseId,
@@ -18,6 +17,7 @@ export function requestResponseAccept(
 ) {
     const failedMessage = window.t("We received the following error while trying to accept your request response");
     const successMessage = window.t("Request response was successfully accepted!");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(requestResponseLoading());
@@ -31,8 +31,8 @@ export function requestResponseAccept(
                 dispatch([
                     snackbarActions.open({ message: successMessage }),
                     requestResponseNotLoading(),
-                    requestResponseUpdate(BunqJSClient, userId, accountId, requestResponseId),
-                    requestInquiryBatchesUpdate(BunqJSClient, userId, accountId),
+                    requestResponseUpdate(userId, accountId, requestResponseId),
+                    requestInquiryBatchesUpdate(userId, accountId),
                 ]);
             })
             .catch(error => {
@@ -42,23 +42,25 @@ export function requestResponseAccept(
     };
 }
 
-export function requestResponseReject(BunqJSClient, userId, accountId, requestResponseId) {
+export function requestResponseReject(userId, accountId, requestResponseId) {
     const failedMessage = window.t("We received the following error while trying to cancel the request");
     const successMessage = window.t("Request was rejected successfully!");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(requestResponseLoading());
         BunqJSClient.api.requestResponse
             .put(userId, accountId, requestResponseId, "REJECTED", {})
             .then(result => {
-                dispatch(openSnackbar(successMessage));
+                dispatch(snackbarActions.open({ message: successMessage }));
                 dispatch(requestResponseNotLoading());
 
                 // update the information page
-                dispatch(requestResponseUpdate(BunqJSClient, userId, accountId, requestResponseId));
+                dispatch(requestResponseUpdate(userId, accountId, requestResponseId));
             })
             .catch(error => {
                 dispatch(requestResponseNotLoading());
+                // FIXME: restore
                 // BunqErrorHandler(dispatch, error, failedMessage);
             });
     };
diff --git a/src/Actions/request_response_info.js b/src/Actions/request_response_info.js
index 9d31e716..9ca6526c 100644
--- a/src/Actions/request_response_info.js
+++ b/src/Actions/request_response_info.js
@@ -14,8 +14,9 @@ export function requestResponseSetInfo(request_response_info, account_id, reques
     };
 }
 
-export function requestResponseUpdate(BunqJSClient, user_id, account_id, request_response_id) {
+export function requestResponseUpdate(user_id, account_id, request_response_id) {
     const failedMessage = window.t("We failed to load the request information");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(requestResponseLoading());
diff --git a/src/Actions/request_responses.js b/src/Actions/request_responses.js
index f6eb1af2..9e9fb72c 100644
--- a/src/Actions/request_responses.js
+++ b/src/Actions/request_responses.js
@@ -9,14 +9,15 @@ export function requestResponsesSetInfo(requestResponses, account_id, resetOldIt
     return {
         type: type,
         payload: {
-            BunqJSClient,
             requestResponses,
             account_id
         }
     };
 }
 
-export function loadStoredRequestResponses(BunqJSClient) {
+export function loadStoredRequestResponses() {
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
+
     return dispatch => {
         dispatch(requestResponsesLoading());
         const BunqDesktopClient = window.BunqDesktopClient;
@@ -35,7 +36,6 @@ export function loadStoredRequestResponses(BunqJSClient) {
 }
 
 export function requestResponsesUpdate(
-    BunqJSClient,
     userId,
     accountId,
     options = {
diff --git a/src/Actions/scheduled_payments.js b/src/Actions/scheduled_payments.js
index 3ff2bafe..5f0f80a7 100644
--- a/src/Actions/scheduled_payments.js
+++ b/src/Actions/scheduled_payments.js
@@ -11,7 +11,6 @@ export function scheduledPaymentsSetInfo(scheduled_payments, account_id) {
 }
 
 export function scheduledPaymentsInfoUpdate(
-    BunqJSClient,
     user_id,
     account_id,
     options = {
@@ -39,7 +38,6 @@ export function scheduledPaymentsInfoUpdate(
 }
 
 export function scheduledPaymentUpdate(
-    BunqJSClient,
     user_id,
     account_id,
     scheduled_payment_id,
@@ -47,6 +45,7 @@ export function scheduledPaymentUpdate(
     schedule_info
 ) {
     const failedMessage = window.t("We failed to update the scheduled payment for this monetary account");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(scheduledPaymentsLoading());
@@ -54,7 +53,7 @@ export function scheduledPaymentUpdate(
         BunqJSClient.api.schedulePayment
             .put(user_id, account_id, scheduled_payment_id, payment_info, schedule_info)
             .then(result => {
-                dispatch(scheduledPaymentsInfoUpdate(BunqJSClient, user_id, account_id));
+                dispatch(scheduledPaymentsInfoUpdate(user_id, account_id));
                 dispatch(scheduledPaymentsNotLoading());
             })
             .catch(error => {
diff --git a/src/Actions/share_invite_monetary_account_inquiries.js b/src/Actions/share_invite_monetary_account_inquiries.js
index 25ebe7d0..b23fbd67 100644
--- a/src/Actions/share_invite_monetary_account_inquiries.js
+++ b/src/Actions/share_invite_monetary_account_inquiries.js
@@ -10,14 +10,15 @@ export function shareInviteBankInquiriesSetInfo(
     return {
         type: "SHARE_INVITE_INQUIRIES_SET_INFO",
         payload: {
-            BunqJSClient: BunqJSClient,
             account_id: account_id,
             share_invite_monetary_account_inquiries: share_invite_monetary_account_inquiries
         }
     };
 }
 
-export function loadStoredShareInviteBankInquiries(BunqJSClient) {
+export function loadStoredShareInviteBankInquiries() {
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
+
     return dispatch => {
         dispatch(shareInviteBankInquiriesLoading());
         const BunqDesktopClient = window.BunqDesktopClient;
@@ -35,7 +36,6 @@ export function loadStoredShareInviteBankInquiries(BunqJSClient) {
 }
 
 export function shareInviteMonetaryAccountInquiriesInfoUpdate(
-    BunqJSClient,
     user_id,
     account_id,
     options = {
@@ -45,6 +45,7 @@ export function shareInviteMonetaryAccountInquiriesInfoUpdate(
     }
 ) {
     const failedMessage = window.t("We failed to load the share invite inquiries for this monetary account");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(shareInviteBankInquiriesLoading());
diff --git a/src/Actions/share_invite_monetary_account_inquiry.js b/src/Actions/share_invite_monetary_account_inquiry.js
index a5d19c06..c39c2247 100644
--- a/src/Actions/share_invite_monetary_account_inquiry.js
+++ b/src/Actions/share_invite_monetary_account_inquiry.js
@@ -3,7 +3,6 @@ import { shareInviteMonetaryAccountInquiriesInfoUpdate } from "./share_invite_mo
 import { actions as snackbarActions } from "~store/snackbar";
 
 export function shareInviteMonetaryAccountInquirySend(
-    BunqJSClient,
     userId,
     accountId,
     counterparty,
@@ -26,7 +25,7 @@ export function shareInviteMonetaryAccountInquirySend(
                 dispatch(snackbarActions.open({ message: successMessage }));
 
                 // update the payments, accounts and share list
-                dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(BunqJSClient, userId, accountId));
+                dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(userId, accountId));
                 dispatch(shareInviteMonetaryAccountInquiryNotLoading());
             })
             .catch(error => {
@@ -38,7 +37,6 @@ export function shareInviteMonetaryAccountInquirySend(
 }
 
 export function shareInviteMonetaryAccountInquiryChangeStatus(
-    BunqJSClient,
     userId,
     accountId,
     shareInviteMonetaryAccountInquiryId,
@@ -46,17 +44,18 @@ export function shareInviteMonetaryAccountInquiryChangeStatus(
 ) {
     const failedMessage = window.t("We received the following error while updating your connect request");
     const successMessage = window.t("Connect request was updated successfully!");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(shareInviteMonetaryAccountInquiryLoading());
 
         BunqJSClient.api.shareInviteMonetaryAccountInquiry
             .putStatus(userId, accountId, shareInviteMonetaryAccountInquiryId, status)
-            .then(result => {
-                dispatch(openSnackbar(successMessage));
+            .then(() => {
+                dispatch(snackbarActions.open({ message: successMessage }));
 
                 // update the payments, accounts and share list
-                dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(BunqJSClient, userId, accountId));
+                dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(userId, accountId));
                 dispatch(shareInviteMonetaryAccountInquiryNotLoading());
             })
             .catch(error => {
diff --git a/src/Actions/share_invite_monetary_account_response.js b/src/Actions/share_invite_monetary_account_response.js
index 9bd90068..7da2069b 100644
--- a/src/Actions/share_invite_monetary_account_response.js
+++ b/src/Actions/share_invite_monetary_account_response.js
@@ -2,13 +2,13 @@ import { shareInviteMonetaryAccountResponsesInfoUpdate } from "./share_invite_mo
 import { actions as snackbarActions } from "~store/snackbar";
 
 export function shareInviteMonetaryAccountResponseChangeStatus(
-    BunqJSClient,
     userId,
     shareInviteMonetaryAccountResponseId,
     status
 ) {
     const failedMessage = window.t("We received the following error while updating your connect request");
     const successMessage = window.t("Connect request was updated successfully!");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(shareInviteMonetaryAccountResponseLoading());
@@ -19,7 +19,7 @@ export function shareInviteMonetaryAccountResponseChangeStatus(
                 dispatch(snackbarActions.open({ message: successMessage }));
 
                 // update the payments, accounts and share list
-                dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(BunqJSClient, userId, accountId));
+                dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(userId, accountId));
                 dispatch(shareInviteMonetaryAccountResponseNotLoading());
             })
             .catch(error => {
diff --git a/src/Actions/share_invite_monetary_account_responses.js b/src/Actions/share_invite_monetary_account_responses.js
index 8cf86fa0..58710c14 100644
--- a/src/Actions/share_invite_monetary_account_responses.js
+++ b/src/Actions/share_invite_monetary_account_responses.js
@@ -9,13 +9,14 @@ export function shareInviteMonetaryAccountResponsesSetInfo(
     return {
         type: "SHARE_INVITE_RESPONSES_SET_INFO",
         payload: {
-            BunqJSClient: BunqJSClient,
             share_invite_monetary_account_responses: share_invite_monetary_account_responses
         }
     };
 }
 
-export function loadStoredShareInviteMonetaryAccountResponses(BunqJSClient) {
+export function loadStoredShareInviteMonetaryAccountResponses() {
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
+
     return dispatch => {
         dispatch(shareInviteMonetaryAccountResponsesLoading());
         const BunqDesktopClient = window.BunqDesktopClient;
@@ -33,7 +34,6 @@ export function loadStoredShareInviteMonetaryAccountResponses(BunqJSClient) {
 }
 
 export function shareInviteMonetaryAccountResponsesInfoUpdate(
-    BunqJSClient,
     user_id,
     options = {
         count: 200,
@@ -42,6 +42,7 @@ export function shareInviteMonetaryAccountResponsesInfoUpdate(
     }
 ) {
     const failedMessage = window.t("We failed to load the share invite responses for this account");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(shareInviteMonetaryAccountResponsesLoading());
@@ -49,7 +50,7 @@ export function shareInviteMonetaryAccountResponsesInfoUpdate(
         BunqJSClient.api.shareInviteMonetaryAccountResponse
             .list(user_id, options)
             .then(shareInviteMonetaryAccountResponses => {
-                dispatch(shareInviteMonetaryAccountResponsesSetInfo(shareInviteMonetaryAccountResponses, BunqJSClient));
+                dispatch(shareInviteMonetaryAccountResponsesSetInfo(shareInviteMonetaryAccountResponses));
                 dispatch(shareInviteMonetaryAccountResponsesNotLoading());
             })
             .catch(error => {
diff --git a/src/Actions/user.js b/src/Actions/user.js
index a36bf76c..eced4e53 100644
--- a/src/Actions/user.js
+++ b/src/Actions/user.js
@@ -29,9 +29,10 @@ export function userSetInfo(user, type) {
     };
 }
 
-export function userUpdateImage(BunqJSClient, userId, attachmentId, userType = "UserPerson") {
+export function userUpdateImage(userId, attachmentId, userType = "UserPerson") {
     const failedMessage = window.t("We received the following error while updating the image for your account");
     const successMessage = window.t("Image updated successfully!");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         // make the image public
@@ -55,7 +56,7 @@ export function userUpdateImage(BunqJSClient, userId, attachmentId, userType = "
                 apiPromise
                     .then(() => {
                         dispatch(snackbarActions.open({ message: successMessage }));
-                        dispatch(usersUpdate(BunqJSClient, true));
+                        dispatch(usersUpdate( true));
                     })
                     .catch(error => {
                         BunqErrorHandler(dispatch, error, failedMessage);
diff --git a/src/Actions/users.js b/src/Actions/users.js
index d7809bb1..0961fbb4 100644
--- a/src/Actions/users.js
+++ b/src/Actions/users.js
@@ -1,8 +1,9 @@
 import BunqErrorHandler from "~functions/BunqErrorHandler";
 import { userSetInfo } from "./user";
 
-export function usersUpdate(BunqJSClient, updated = false) {
+export function usersUpdate(updated = false) {
     const failedMessage = window.t("We failed to load your users");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return dispatch => {
         dispatch(usersLoading());
diff --git a/src/Reducers/general_filter.js b/src/Reducers/general_filter.js
index e0de2859..638d936e 100644
--- a/src/Reducers/general_filter.js
+++ b/src/Reducers/general_filter.js
@@ -1,5 +1,5 @@
 export const defaultState = {
-    date: new Date()
+    date: +new Date()
 };
 
 export default function reducer(state = defaultState, action) {
@@ -50,9 +50,8 @@ export default function reducer(state = defaultState, action) {
             // any filter change updates the filter timestamp
             // for easier comparisons in shouldComponentUpdate handlers
             return {
-                date: new Date()
+                date: +new Date()
             };
-            break;
     }
     return state;
 }
diff --git a/src/Reducers/master_card_actions.js b/src/Reducers/master_card_actions.js
index f478af3c..ff00e919 100644
--- a/src/Reducers/master_card_actions.js
+++ b/src/Reducers/master_card_actions.js
@@ -32,18 +32,15 @@ export default (state = defaultState, action) => {
             const mergedMasterCardActions = mergedInfo.items.slice(0, 1000);
 
             // store the data if we have access to the bunqjsclient
-            if (action.payload.BunqJSClient) {
-                const BunqDesktopClient = window.BunqDesktopClient;
-                BunqDesktopClient.storeEncrypt(
-                    {
-                        items: mergedMasterCardActions,
-                        account_id: action.payload.account_id
-                    },
-                    STORED_MASTER_CARD_ACTIONS
-                )
-                    .then(() => {})
-                    .catch(() => {});
-            }
+            window.BunqDesktopClient.storeEncrypt(
+                {
+                    items: mergedMasterCardActions,
+                    account_id: action.payload.account_id
+                },
+                STORED_MASTER_CARD_ACTIONS
+            )
+                .then(() => {})
+                .catch(() => {});
 
             // update newer and older id for this monetary account
             const newerIds = {
diff --git a/src/Reducers/payments.js b/src/Reducers/payments.js
index a1409dad..b53282c2 100644
--- a/src/Reducers/payments.js
+++ b/src/Reducers/payments.js
@@ -30,18 +30,15 @@ export default (state = defaultState, action) => {
             const mergedPayments = mergedInfo.items.slice(0, 1000);
 
             // store the data if we have access to the bunqjsclient
-            if (action.payload.BunqJSClient) {
-                const BunqDesktopClient = window.BunqDesktopClient;
-                BunqDesktopClient.storeEncrypt(
-                    {
-                        items: mergedPayments,
-                        account_id: action.payload.account_id
-                    },
-                    STORED_PAYMENTS
-                )
-                    .then(() => {})
-                    .catch(() => {});
-            }
+            window.BunqDesktopClient.storeEncrypt(
+                {
+                    items: mergedPayments,
+                    account_id: action.payload.account_id
+                },
+                STORED_PAYMENTS
+            )
+                .then(() => {})
+                .catch(() => {});
 
             // update newer and older id for this monetary account
             const newerIds = {
diff --git a/src/Reducers/pending_payments.js b/src/Reducers/pending_payments.js
index 04b58f18..7fd57a0d 100644
--- a/src/Reducers/pending_payments.js
+++ b/src/Reducers/pending_payments.js
@@ -4,7 +4,7 @@ import { storeEncryptString } from "~functions/Crypto/CryptoWorkerWrapper";
 import { PENDING_PAYMENTS_LOCATION } from "~actions/pending_payments";
 
 export const defaultState = {
-    last_updated: new Date(),
+    last_updated: +new Date(),
     pending_payments: {}
 };
 
@@ -15,16 +15,15 @@ export default (state = defaultState, action) => {
         case "PENDING_PAYMENTS_SET_PAYMENTS":
             const newSetPendingPayment = action.payload.pending_payments;
 
-            if (action.payload.BunqJSClient) {
-                const BunqDesktopClient = window.BunqDesktopClient;
-                BunqDesktopClient.storeEncrypt(newSetPendingPayment, PENDING_PAYMENTS_LOCATION)
-                    .then(() => {})
-                    .catch(() => {});
-            }
+            window.BunqDesktopClient.storeEncrypt(newSetPendingPayment, PENDING_PAYMENTS_LOCATION)
+                .then(() => {
+                })
+                .catch(() => {
+                });
 
             return {
                 ...state,
-                last_updated: new Date(),
+                last_updated: +new Date(),
                 pending_payments: newSetPendingPayment
             };
 
@@ -38,16 +37,15 @@ export default (state = defaultState, action) => {
                 payment: newPendingPayment
             };
 
-            if (action.payload.BunqJSClient) {
-                const BunqDesktopClient = window.BunqDesktopClient;
-                BunqDesktopClient.storeEncrypt(pendingPayments, PENDING_PAYMENTS_LOCATION)
-                    .then(() => {})
-                    .catch(() => {});
-            }
+            window.BunqDesktopClient.storeEncrypt(pendingPayments, PENDING_PAYMENTS_LOCATION)
+                .then(() => {
+                })
+                .catch(() => {
+                });
 
             return {
                 ...state,
-                last_updated: new Date(),
+                last_updated: +new Date(),
                 pending_payments: pendingPayments
             };
 
@@ -64,16 +62,15 @@ export default (state = defaultState, action) => {
                 };
             });
 
-            if (action.payload.BunqJSClient) {
-                const BunqDesktopClient = window.BunqDesktopClient;
-                BunqDesktopClient.storeEncrypt(pendingPayments, PENDING_PAYMENTS_LOCATION)
-                    .then(() => {})
-                    .catch(() => {});
-            }
+            window.BunqDesktopClient.storeEncrypt(pendingPayments, PENDING_PAYMENTS_LOCATION)
+                .then(() => {
+                })
+                .catch(() => {
+                });
 
             return {
                 ...state,
-                last_updated: new Date(),
+                last_updated: +new Date(),
                 pending_payments: pendingPayments
             };
 
@@ -88,16 +85,11 @@ export default (state = defaultState, action) => {
                 }
             });
 
-            if (action.payload.BunqJSClient) {
-                const BunqDesktopClient = window.BunqDesktopClient;
-                BunqDesktopClient.storeEncrypt(pendingPayments, PENDING_PAYMENTS_LOCATION)
-                    .then(() => {})
-                    .catch(() => {});
-            }
+            window.BunqDesktopClient.storeEncrypt(pendingPayments, PENDING_PAYMENTS_LOCATION).then();
 
             return {
                 ...state,
-                last_updated: new Date(),
+                last_updated: +new Date(),
                 pending_payments: pendingPayments
             };
 
@@ -108,16 +100,11 @@ export default (state = defaultState, action) => {
                 delete pendingPayments[clearPendingPaymentId];
             }
 
-            if (action.payload.BunqJSClient) {
-                const BunqDesktopClient = window.BunqDesktopClient;
-                BunqDesktopClient.storeEncrypt(pendingPayments, PENDING_PAYMENTS_LOCATION)
-                    .then(() => {})
-                    .catch(() => {});
-            }
+            window.BunqDesktopClient.storeEncrypt(pendingPayments, PENDING_PAYMENTS_LOCATION).then();
 
             return {
                 ...state,
-                last_updated: new Date(),
+                last_updated: +new Date(),
                 pending_payments: pendingPayments
             };
 
diff --git a/src/Reducers/queue.js b/src/Reducers/queue.js
index 4a53d054..b86fad28 100644
--- a/src/Reducers/queue.js
+++ b/src/Reducers/queue.js
@@ -52,7 +52,7 @@ export default function reducer(state = defaultState, action) {
                 trigger_sync: false,
                 request_counter: 0,
                 max_request_counter: 0,
-                finished_queue: new Date()
+                finished_queue: +new Date(),
             };
         case "QUEUE_START_SYNC":
             return {
diff --git a/src/Reducers/request_inquiries.js b/src/Reducers/request_inquiries.js
index 14421c54..0c676253 100644
--- a/src/Reducers/request_inquiries.js
+++ b/src/Reducers/request_inquiries.js
@@ -33,19 +33,13 @@ export default (state = defaultState, action) => {
             // limit payments to 1000 in total
             const mergedRequestInquiries = mergedInfo.items.slice(0, 1000);
 
-            // store the data if we have access to the bunqjsclient
-            if (action.payload.BunqJSClient) {
-                const BunqDesktopClient = window.BunqDesktopClient;
-                BunqDesktopClient.storeEncrypt(
-                    {
-                        items: mergedRequestInquiries,
-                        account_id: action.payload.account_id
-                    },
-                    STORED_REQUEST_INQUIRIES
-                )
-                    .then(() => {})
-                    .catch(() => {});
-            }
+            window.BunqDesktopClient.storeEncrypt(
+                {
+                    items: mergedRequestInquiries,
+                    account_id: action.payload.account_id
+                },
+                STORED_REQUEST_INQUIRIES
+            ).then();
 
             // update newer and older id for this monetary account
             const newerIds = {
diff --git a/src/Reducers/request_inquiry_batches.js b/src/Reducers/request_inquiry_batches.js
index 919bef4a..1a907246 100644
--- a/src/Reducers/request_inquiry_batches.js
+++ b/src/Reducers/request_inquiry_batches.js
@@ -33,19 +33,13 @@ export default (state = defaultState, action) => {
             // limit payments to 1000 in total
             const mergedRequestBatches = mergedInfo.items.slice(0, 1000);
 
-            // store the data if we have access to the bunqjsclient
-            if (action.payload.BunqJSClient) {
-                const BunqDesktopClient = window.BunqDesktopClient;
-                BunqDesktopClient.storeEncrypt(
-                    {
-                        items: mergedRequestBatches,
-                        account_id: action.payload.account_id
-                    },
-                    STORED_REQUEST_INQUIRY_BATCHES
-                )
-                    .then(() => {})
-                    .catch(() => {});
-            }
+            window.BunqDesktopClient.storeEncrypt(
+                {
+                    items: mergedRequestBatches,
+                    account_id: action.payload.account_id
+                },
+                STORED_REQUEST_INQUIRY_BATCHES
+            ).then();
 
             // update newer and older id for this monetary account
             const newerIds = {
diff --git a/src/Reducers/request_responses.js b/src/Reducers/request_responses.js
index ba1f1e0f..fe28edbd 100644
--- a/src/Reducers/request_responses.js
+++ b/src/Reducers/request_responses.js
@@ -33,19 +33,13 @@ export default (state = defaultState, action) => {
             // limit payments to 1000 in total
             const mergedRequestResponses = mergedInfo.items.slice(0, 1000);
 
-            // store the data if we have access to the bunqjsclient
-            if (action.payload.BunqJSClient) {
-                const BunqDesktopClient = window.BunqDesktopClient;
-                BunqDesktopClient.storeEncrypt(
-                    {
-                        items: mergedRequestResponses,
-                        account_id: action.payload.account_id
-                    },
-                    STORED_REQUEST_RESPONSES
-                )
-                    .then(() => {})
-                    .catch(() => {});
-            }
+            window.BunqDesktopClient.storeEncrypt(
+                {
+                    items: mergedRequestResponses,
+                    account_id: action.payload.account_id
+                },
+                STORED_REQUEST_RESPONSES
+            ).then();
 
             // update newer and older id for this monetary account
             const newerIds = {
diff --git a/src/Reducers/savings_goals.js b/src/Reducers/savings_goals.js
index dfc502c2..275622e3 100644
--- a/src/Reducers/savings_goals.js
+++ b/src/Reducers/savings_goals.js
@@ -21,7 +21,7 @@ if (savingsGoalsStored === undefined) settings.set(BUNQDESKTOP_SAVINGS_GOALS, {}
 
 // construct the default state
 export const defaultState = {
-    last_update: new Date().getTime(),
+    last_update: +new Date(),
     savings_goals: mappedSavingsGoals
 };
 
@@ -57,7 +57,7 @@ export default function reducer(state = defaultState, action) {
             storeSavingsGoalsSafe(savingsGoals);
             return {
                 ...state,
-                last_update: new Date().getTime(),
+                last_update: +new Date(),
                 savings_goals: savingsGoals
             };
 
@@ -65,7 +65,7 @@ export default function reducer(state = defaultState, action) {
             storeSavingsGoalsSafe(action.payload.savings_goals);
             return {
                 ...state,
-                last_update: new Date().getTime(),
+                last_update: +new Date(),
                 savings_goals: action.payload.savings_goals
             };
 
@@ -76,7 +76,7 @@ export default function reducer(state = defaultState, action) {
             storeSavingsGoalsSafe(savingsGoals);
             return {
                 ...state,
-                last_update: new Date().getTime(),
+                last_update: +new Date(),
                 savings_goals: savingsGoals
             };
 
@@ -92,7 +92,7 @@ export default function reducer(state = defaultState, action) {
             storeSavingsGoalsSafe(currentSavingsGoals);
             return {
                 ...state,
-                last_update: new Date().getTime(),
+                last_update: +new Date(),
                 savings_goals: currentSavingsGoals
             };
 
@@ -113,7 +113,7 @@ export default function reducer(state = defaultState, action) {
 
             return {
                 ...state,
-                last_update: new Date().getTime(),
+                last_update: +new Date(),
                 savings_goals: {
                     ...state.savings_goals,
                     ...storedSavingsGoals
diff --git a/src/Reducers/share_invite_monetary_account_inquiries.js b/src/Reducers/share_invite_monetary_account_inquiries.js
index c98f18f9..9c338046 100644
--- a/src/Reducers/share_invite_monetary_account_inquiries.js
+++ b/src/Reducers/share_invite_monetary_account_inquiries.js
@@ -11,19 +11,13 @@ export const defaultState = {
 export default (state = defaultState, action) => {
     switch (action.type) {
         case "SHARE_INVITE_INQUIRIES_SET_INFO":
-            // store the data if we have access to the bunqjsclient
-            if (action.payload.BunqJSClient) {
-                const BunqDesktopClient = window.BunqDesktopClient;
-                BunqDesktopClient.storeEncrypt(
-                    {
-                        items: action.payload.share_invite_monetary_account_inquiries,
-                        account_id: action.payload.account_id
-                    },
-                    STORED_SHARE_INVITE_MONETARY_ACCOUNT_INQUIRIES
-                )
-                    .then(() => {})
-                    .catch(() => {});
-            }
+            window.BunqDesktopClient.storeEncrypt(
+                {
+                    items: action.payload.share_invite_monetary_account_inquiries,
+                    account_id: action.payload.account_id
+                },
+                STORED_SHARE_INVITE_MONETARY_ACCOUNT_INQUIRIES
+            ).then();
 
             return {
                 ...state,
diff --git a/src/Reducers/share_invite_monetary_account_responses.js b/src/Reducers/share_invite_monetary_account_responses.js
index a0986cb3..2278c49f 100644
--- a/src/Reducers/share_invite_monetary_account_responses.js
+++ b/src/Reducers/share_invite_monetary_account_responses.js
@@ -11,17 +11,12 @@ export default (state = defaultState, action) => {
     switch (action.type) {
         case "SHARE_INVITE_RESPONSES_SET_INFO":
             // store the data if we have access to the bunqjsclient
-            if (action.payload.BunqJSClient) {
-                const BunqDesktopClient = window.BunqDesktopClient;
-                BunqDesktopClient.storeEncrypt(
-                    {
-                        items: action.payload.share_invite_monetary_account_responses
-                    },
-                    STORED_SHARE_INVITE_MONETARY_ACCOUNT_RESPONSES
-                )
-                    .then(() => {})
-                    .catch(() => {});
-            }
+            window.BunqDesktopClient.storeEncrypt(
+                {
+                    items: action.payload.share_invite_monetary_account_responses
+                },
+                STORED_SHARE_INVITE_MONETARY_ACCOUNT_RESPONSES
+            ).then();
 
             return {
                 ...state,
diff --git a/src/app.ts b/src/app.ts
index 3f22bc3e..5f2568ce 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -2,4 +2,4 @@ import "~helpers/context_menu";
 import "~helpers/external_links";
 import BunqDesktopClient from "~components/BunqDesktopClient";
 
-export type AppWindow = Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+export type AppWindow = Window & { BunqDesktopClient?: BunqDesktopClient; t: Function };
diff --git a/src/components/AccountCard.tsx b/src/components/AccountCard.tsx
index b5835d0c..72a6ca55 100644
--- a/src/components/AccountCard.tsx
+++ b/src/components/AccountCard.tsx
@@ -12,7 +12,9 @@ import DeleteIcon from "@material-ui/icons/Delete";
 import EditIcon from "@material-ui/icons/Edit";
 import LinkIcon from "@material-ui/icons/Link";
 import PeopleIcon from "@material-ui/icons/People";
+import { AppWindow } from "~app";
 import BunqDesktopClient from "~components/BunqDesktopClient";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import UploadFullscreen from "./FileUpload/UploadFullscreen";
 import LazyAttachmentImage from "./AttachmentImage/LazyAttachmentImage";
@@ -25,7 +27,7 @@ import { connectGetBudget } from "~functions/ConnectGetPermissions";
 import { actions as snackbarActions } from "~store/snackbar";
 import { actions as accountsActions } from "~store/accounts";
 
-declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+declare let window: AppWindow;
 
 const styles = {
     avatar: {
@@ -41,7 +43,15 @@ const styles = {
     }
 };
 
-class AccountCard extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class AccountCard extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
 
@@ -99,7 +109,6 @@ class AccountCard extends React.Component {
         return (
             <Paper>
                 <UploadFullscreen
-                    BunqJSClient={this.props.BunqJSClient}
                     open={this.state.displayUploadScreen}
                     onComplete={this.handleFileUpload}
                     onClose={this.toggleFileUploadDialog}
@@ -122,7 +131,6 @@ class AccountCard extends React.Component {
                             }
                         >
                             <LazyAttachmentImage
-                                BunqJSClient={this.props.BunqJSClient}
                                 height={60}
                                 imageUUID={account.avatar.image[0].attachment_public_uuid}
                                 style={
@@ -164,18 +172,18 @@ class AccountCard extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user
     };
 };
 
-const mapDispatchToProps = (dispatch, props) => {
-    const { BunqJSClient } = props;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open( { message })),
         accountsUpdateImage: (userId, accountId, attachmentId, accountType) =>
-            dispatch(accountsActions.updateImage(BunqJSClient, userId, accountId, attachmentId, accountType))
+            // FIXME
+            dispatch(accountsActions.updateImage(userId, accountId, attachmentId, accountType))
     };
 };
 
diff --git a/src/components/AccountList/AccountAvatarCircularProgress.tsx b/src/components/AccountList/AccountAvatarCircularProgress.tsx
index 0569ba10..d1533906 100644
--- a/src/components/AccountList/AccountAvatarCircularProgress.tsx
+++ b/src/components/AccountList/AccountAvatarCircularProgress.tsx
@@ -11,7 +11,18 @@ const styles = {
         top: 7
     }
 };
-const AccountAvatarCircularProgress = ({ account, theme, selected = false, style = {} }) => {
+
+interface IState {
+}
+
+interface IProps {
+    account: any;
+    theme: any;
+    selected: boolean;
+    style: CSSProperties;
+}
+
+const AccountAvatarCircularProgress = ({ account, theme, selected = false, style = {} }: ReturnType<typeof mapStateToProps> & IProps) => {
     let isSavingsAccount = false;
     if (account.accountType === "MonetaryAccountSavings") {
         isSavingsAccount = true;
@@ -65,7 +76,7 @@ const AccountAvatarCircularProgress = ({ account, theme, selected = false, style
 
 const mapStateToProps = state => {
     return {
-        theme: state.options.theme
+        theme: state.options.theme,
     };
 };
 
diff --git a/src/components/AccountList/AccountList.tsx b/src/components/AccountList/AccountList.tsx
index c7bac120..6d07cba7 100644
--- a/src/components/AccountList/AccountList.tsx
+++ b/src/components/AccountList/AccountList.tsx
@@ -1,3 +1,4 @@
+import BunqJSClient from "@bunq-community/bunq-js-client";
 import React, { CSSProperties } from "react";
 import { ipcRenderer } from "electron";
 import { translate } from "react-i18next";
@@ -14,7 +15,9 @@ import LinearProgress from "@material-ui/core/LinearProgress";
 import RefreshIcon from "@material-ui/icons/Refresh";
 import CheckBoxIcon from "@material-ui/icons/CheckBox";
 import CheckBoxOutlinedIcon from "@material-ui/icons/CheckBoxOutlined";
+import { AppWindow } from "~app";
 import { accountsUpdate } from "~store/accounts/thunks";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import LimitedPremiumListItem from "../LimitedPremiumListItem";
 import AccountListItem from "./AccountListItem";
@@ -42,8 +45,23 @@ const styles = {
     }
 };
 
-class AccountList extends React.Component<any> {
-    state: any;
+interface IState {
+    totalBalance: number;
+    fetchedAccounts: any;
+    accountTotalSelectionMode: any;
+}
+
+interface IProps {
+    t: AppWindow['t'];
+    BunqJSClient: BunqJSClient;
+}
+
+class AccountList extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    static defaultProps = {
+        denseMode: false
+    };
+
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -181,10 +199,10 @@ class AccountList extends React.Component<any> {
         }
     };
 
-    accountExcludeFromTotal = accountId => event => {
+    accountExcludeFromTotal = accountId => () => {
         this.props.accountExcludeFromTotal(accountId);
     };
-    accountIncludeInTotal = accountId => event => {
+    accountIncludeInTotal = accountId => () => {
         this.props.accountIncludeInTotal(accountId);
     };
 
@@ -236,7 +254,6 @@ class AccountList extends React.Component<any> {
                     return (
                         <AccountListItem
                             onClick={onClickHandler}
-                            BunqJSClient={this.props.BunqJSClient}
                             denseMode={this.props.denseMode}
                             account={account}
                             isJoint={!!account.all_co_owner}
@@ -292,12 +309,7 @@ class AccountList extends React.Component<any> {
     }
 }
 
-// @ts-ignore
-AccountList.defaultProps = {
-    denseMode: false
-};
-
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         userType: state.user.user_type,
@@ -311,9 +323,9 @@ const mapStateToProps = state => {
         registrationReady: state.registration.ready,
 
         accounts: state.accounts.accounts,
-        accountsSelectedId: state.accounts.selected_account,
+        accountsSelectedId: state.accounts.selectedAccount,
         accountsLoading: state.accounts.loading,
-        excludedAccountIds: state.accounts.excluded_account_ids,
+        excludedAccountIds: state.accounts.excludedAccountIds,
 
         shareInviteMonetaryAccountResponses:
             state.share_invite_monetary_account_responses.share_invite_monetary_account_responses,
@@ -321,34 +333,34 @@ const mapStateToProps = state => {
         shareInviteBankInquiriesLoading: state.share_invite_monetary_account_inquiries.loading,
 
         paymentsLoading: state.payments.loading,
-        bunqMeTabsLoading: state.bunq_me_tabs.loading,
+        bunqMeTabsLoading: state.bunqMeTabs.loading,
         requestResponsesLoading: state.request_responses.loading,
         requestInquiriesLoading: state.request_inquiries.loading,
         masterCardActionsLoading: state.master_card_actions.loading
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
+const mapDispatchToProps = (dispatch: AppDispatch, ownProps: IProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        paymentsUpdate: (userId, accountId) => dispatch(paymentInfoUpdate(BunqJSClient, userId, accountId)),
+        paymentsUpdate: (userId, accountId) => dispatch(paymentInfoUpdate(userId, accountId)),
         requestInquiriesUpdate: (userId, accountId) =>
-            dispatch(requestInquiriesUpdate(BunqJSClient, userId, accountId)),
+            dispatch(requestInquiriesUpdate(userId, accountId)),
         requestResponsesUpdate: (userId, accountId) =>
-            dispatch(requestResponsesUpdate(BunqJSClient, userId, accountId)),
+            dispatch(requestResponsesUpdate(userId, accountId)),
         masterCardActionsUpdate: (userId, accountId) =>
-            dispatch(masterCardActionsUpdate(BunqJSClient, userId, accountId)),
-        bunqMeTabsUpdate: (userId, accountId) => dispatch(bunqMeTabsActions.setInfo({ resetOldItems: false, BunqJSClient, user_id: userId, account_id: accountId })),
+            dispatch(masterCardActionsUpdate(userId, accountId)),
+        bunqMeTabsUpdate: (userId, accountId) => dispatch(bunqMeTabsActions.setInfo({ resetOldItems: false, user_id: userId, account_id: accountId })),
 
-        accountsUpdate: userId => dispatch(accountsUpdate(BunqJSClient, userId)),
+        accountsUpdate: userId => dispatch(accountsUpdate(userId)),
 
         accountExcludeFromTotal: accountId => dispatch(accountsActions.excludeFromTotal(accountId)),
         accountIncludeInTotal: accountId => dispatch(accountsActions.includeInTotal(accountId)),
 
         shareInviteMonetaryAccountResponsesInfoUpdate: userId =>
-            dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(BunqJSClient, userId)),
+            dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(userId)),
         shareInviteMonetaryAccountInquiriesInfoUpdate: (userId, accountId) =>
-            dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(BunqJSClient, userId, accountId)),
+            dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(userId, accountId)),
         selectAccount: accountId => dispatch(accountsActions.selectAccount(accountId)),
 
         updateStatisticsSavingsGoals: (accounts, shareInviteMonetaryAccountResponses) =>
diff --git a/src/components/AccountList/AccountListItem.tsx b/src/components/AccountList/AccountListItem.tsx
index 9a4b9623..4f2593a8 100644
--- a/src/components/AccountList/AccountListItem.tsx
+++ b/src/components/AccountList/AccountListItem.tsx
@@ -1,3 +1,4 @@
+import BunqJSClient from "@bunq-community/bunq-js-client";
 import React, { CSSProperties } from "react";
 import { translate } from "react-i18next";
 import { connect } from "react-redux";
@@ -18,6 +19,7 @@ import NavLink from "~components/Routing/NavLink";
 import { connectGetBudget } from "~functions/ConnectGetPermissions";
 
 import { formatMoney } from "~functions/Utils";
+import { AppDispatch, ReduxState } from "~store/index";
 import AccountAvatarCircularProgress from "./AccountAvatarCircularProgress";
 
 import { actions as accountsActions } from "~store/accounts";
@@ -41,7 +43,14 @@ const styles = {
     }
 };
 
-class AccountListItem extends React.Component<any> {
+interface IState {
+}
+
+interface IProps {
+    BunqJSClient: BunqJSClient;
+}
+
+class AccountListItem extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
     static defaultProps = {
         clickable: true,
         denseMode: false,
@@ -50,7 +59,7 @@ class AccountListItem extends React.Component<any> {
         secondaryAction: false
     };
 
-    state: any;
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -150,7 +159,6 @@ class AccountListItem extends React.Component<any> {
                 <Avatar style={styles.bigAvatar}>
                     <LazyAttachmentImage
                         height={60}
-                        BunqJSClient={this.props.BunqJSClient}
                         imageUUID={account.avatar.image[0].attachment_public_uuid}
                     />
                 </Avatar>
@@ -170,19 +178,19 @@ class AccountListItem extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         theme: state.options.theme,
         paymentsLoading: state.payments.loading,
         hideBalance: state.options.hide_balance,
 
-        selectedAccountIds: state.account_id_filter.selected_account_ids,
-        toggleAccountIds: state.account_id_filter.toggle
+        selectedAccountIds: state.accountIdFilter.selectedAccountIds,
+        toggleAccountIds: state.accountIdFilter.toggle,
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
+const mapDispatchToProps = (dispatch: AppDispatch, ownProps: IProps) => {
     const { BunqJSClient } = ownProps;
     return {
         selectAccount: accountId => dispatch(accountsActions.selectAccount(accountId)),
diff --git a/src/components/AccountList/AccountListItemChip.tsx b/src/components/AccountList/AccountListItemChip.tsx
index b25820b3..6ba8238c 100644
--- a/src/components/AccountList/AccountListItemChip.tsx
+++ b/src/components/AccountList/AccountListItemChip.tsx
@@ -6,7 +6,6 @@ import LazyAttachmentImage from "~components/AttachmentImage/LazyAttachmentImage
 
 export default props => {
     const {
-        BunqJSClient,
         account,
         style = {
             margin: 6
@@ -42,7 +41,6 @@ export default props => {
             avatar={
                 <Avatar>
                     <LazyAttachmentImage
-                        BunqJSClient={BunqJSClient}
                         imageUUID={account.avatar.image[0].attachment_public_uuid}
                         style={{ width: 32, height: 32 }}
                     />
diff --git a/src/components/App.tsx b/src/components/App.tsx
index b1b273da..7df189eb 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -33,7 +33,6 @@ export default class App extends React.Component<IProps> {
                             <Layout
                                 routesComponent={Routes}
                                 analytics={this.props.analytics}
-                                BunqJSClient={this.props.BunqJSClient}
                             />
                         </HashRouter>
                     </Provider>
diff --git a/src/components/AttachmentImage/AttachmentImage.tsx b/src/components/AttachmentImage/AttachmentImage.tsx
index 428c31c2..95983946 100644
--- a/src/components/AttachmentImage/AttachmentImage.tsx
+++ b/src/components/AttachmentImage/AttachmentImage.tsx
@@ -1,8 +1,9 @@
 import React from "react";
+import { AppWindow } from "~app";
 import BunqDesktopClient from "~components/BunqDesktopClient";
 import Logger from "~functions/Logger";
 
-declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+declare let window: AppWindow;
 
 class AttachmentImage extends React.PureComponent<any> {
     state: any;
@@ -113,7 +114,7 @@ class AttachmentImage extends React.PureComponent<any> {
 
     render() {
         // exclude custom props
-        const { BunqJSClient, imageUUID, defaultImage, ...props } = this.props;
+        const { imageUUID, defaultImage, ...props } = this.props;
 
         const defaultSizes = {
             width: "auto",
diff --git a/src/components/BunqMeTabList.tsx b/src/components/BunqMeTabList.tsx
index 292b98e8..b1ccdb37 100644
--- a/src/components/BunqMeTabList.tsx
+++ b/src/components/BunqMeTabList.tsx
@@ -67,7 +67,6 @@ class BunqMeTabList extends React.Component<any> {
                     bunqMeTabLoading={this.props.bunqMeTabLoading}
                     bunqMeTabsLoading={this.props.bunqMeTabsLoading}
                     bunqMeTabPut={this.props.bunqMeTabPut}
-                    BunqJSClient={this.props.BunqJSClient}
                     user={this.props.user}
                 />
             );
@@ -117,12 +116,11 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, props) => {
-    const { BunqJSClient } = props;
+const mapDispatchToProps = (dispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open(message)),
         bunqMeTabPut: (userId, accountId, tabId, status) =>
-            dispatch(bunqMeTabPut(BunqJSClient, userId, accountId, tabId, status))
+            dispatch(bunqMeTabPut(userId, accountId, tabId, status))
     };
 };
 
diff --git a/src/components/Categories/CategoryChips.tsx b/src/components/Categories/CategoryChips.tsx
index 54601647..03c0e146 100644
--- a/src/components/Categories/CategoryChips.tsx
+++ b/src/components/Categories/CategoryChips.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
+import { AppDispatch, ReduxState } from "~store/index";
 import CategoryChip from "./CategoryChip";
 import CategoryHelper from "./CategoryHelper";
 import PrioritySorter from "./PrioritySorter";
@@ -11,7 +12,13 @@ const style = {
     justifyContent: "center"
 };
 
-class CategoryChips extends React.PureComponent<any> {
+interface IState {
+}
+
+interface IProps {
+}
+
+class CategoryChips extends React.PureComponent<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
     static defaultProps = {
         chipStyle: {
             margin: 5
@@ -25,7 +32,7 @@ class CategoryChips extends React.PureComponent<any> {
         style: style
     };
 
-    state: any;
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -63,7 +70,7 @@ class CategoryChips extends React.PureComponent<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         categories: state.categories.categories,
         categories_last_udate: state.categories.last_update,
@@ -71,7 +78,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {};
 };
 
diff --git a/src/components/Categories/CategoryEditor.tsx b/src/components/Categories/CategoryEditor.tsx
index 8714b711..f0b61499 100644
--- a/src/components/Categories/CategoryEditor.tsx
+++ b/src/components/Categories/CategoryEditor.tsx
@@ -1,5 +1,4 @@
 import React, { CSSProperties } from "react";
-import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
 import Chip from "@material-ui/core/Chip";
diff --git a/src/components/Categories/CategoryIcons.tsx b/src/components/Categories/CategoryIcons.tsx
index 7b2c409a..cda2d472 100644
--- a/src/components/Categories/CategoryIcons.tsx
+++ b/src/components/Categories/CategoryIcons.tsx
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { connect } from "react-redux";
+import { AppDispatch, ReduxState } from "~store/index";
 import CategoryHelper from "./CategoryHelper";
 import PrioritySorter from "./PrioritySorter";
 import CategoryIcon from "./CategoryIcon";
@@ -12,7 +13,24 @@ const style = {
     minWidth: 160
 };
 
-class CategoryIcons extends React.Component {
+interface IState {
+}
+
+interface IProps {
+    style: CSSProperties;
+}
+
+class CategoryIcons extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    static defaultProps = {
+        chipStyle: {
+            margin: 5
+        },
+        iconCount: 5,
+        style: style
+    };
+
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -55,15 +73,7 @@ class CategoryIcons extends React.Component {
     }
 }
 
-CategoryIcons.defaultProps = {
-    chipStyle: {
-        margin: 5
-    },
-    iconCount: 5,
-    style: style
-};
-
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         categories: state.categories.categories,
         categories_last_udate: state.categories.last_update,
@@ -71,7 +81,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {};
 };
 
diff --git a/src/components/Categories/CategorySelector.tsx b/src/components/Categories/CategorySelector.tsx
index d82d5f6a..a3ceeb30 100644
--- a/src/components/Categories/CategorySelector.tsx
+++ b/src/components/Categories/CategorySelector.tsx
@@ -4,6 +4,7 @@ import { translate } from "react-i18next";
 import Grid from "@material-ui/core/Grid";
 import Divider from "@material-ui/core/Divider";
 import Collapse from "@material-ui/core/Collapse";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import TranslateButton from "../TranslationHelpers/Button";
 
@@ -17,13 +18,19 @@ const styles = {
     }
 };
 
-class CategorySelector extends React.Component<any> {
+interface IState {
+}
+
+interface IProps {
+}
+
+class CategorySelector extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
     static defaultProps = {
         style: {},
         displayToggleButton: true
     };
 
-    state: any;
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -96,7 +103,7 @@ class CategorySelector extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         categories: state.categories.categories,
         categories_last_udate: state.categories.last_update,
@@ -104,7 +111,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         setCategoryConnection: (id, type, itemInfo) => dispatch(categoriesActions.setCategoryConnection({ category_id: id, item_type: type, item_id: itemInfo })),
         removeCategoryConnection: (id, type, itemInfo) => dispatch(categoriesActions.removeCategoryConnection({ category_id: id, item_type: type, item_id: itemInfo }))
diff --git a/src/components/Categories/CategorySelectorDialog.tsx b/src/components/Categories/CategorySelectorDialog.tsx
index ec53ceca..c772c24c 100644
--- a/src/components/Categories/CategorySelectorDialog.tsx
+++ b/src/components/Categories/CategorySelectorDialog.tsx
@@ -8,8 +8,14 @@ import TranslateButton from "~components/TranslationHelpers/Button";
 
 import CategorySelector from "./CategorySelector";
 
-class CategorySelectorDialog extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class CategorySelectorDialog extends React.Component<IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
diff --git a/src/components/CombinedList/CombinedList.tsx b/src/components/CombinedList/CombinedList.tsx
index 59404e30..d3b2ed89 100644
--- a/src/components/CombinedList/CombinedList.tsx
+++ b/src/components/CombinedList/CombinedList.tsx
@@ -1,3 +1,4 @@
+import BunqJSClient from "@bunq-community/bunq-js-client";
 import React from "react";
 const sessionStore = require("store/storages/sessionStorage");
 import { connect } from "react-redux";
@@ -11,6 +12,7 @@ import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 
 import InfoIcon from "@material-ui/icons/Info";
 import { bunqMeTabPut } from "~store/bunqMeTab/thunks";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import ClearBtn from "../FilterComponents/ClearFilter";
 import FilterDrawer from "../FilterComponents/FilterDrawer";
@@ -60,12 +62,22 @@ const styles: any = {
 
 const STORED_SCROLL_POSITION = "STORED_SCROLL_POSITION";
 
-class CombinedList extends React.Component<any> {
+interface IProps {
+  BunqJSClient: BunqJSClient;
+}
+
+interface IState {
+    displayEventData: boolean,
+    totalEvents: number,
+    events: Array<any>;
+}
+
+class CombinedList extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
     static defaultProps = {
         hiddenTypes: []
     };
 
-    state: any;
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -345,7 +357,7 @@ class CombinedList extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
 
@@ -355,7 +367,7 @@ const mapStateToProps = state => {
         queueFinishedQueue: state.queue.finished_queue,
 
         accounts: state.accounts.accounts,
-        accountsAccountId: state.accounts.selected_account,
+        accountsAccountId: state.accounts.selectedAccount,
 
         forceUpdate: state.application.force_update,
 
@@ -365,23 +377,23 @@ const mapStateToProps = state => {
         searchTerm: state.search_filter.search_term,
         paymentType: state.payment_filter.type,
         paymentVisibility: state.payment_filter.visible,
-        bunqMeTabType: state.bunq_me_tab_filter.type,
-        bunqMeTabVisibility: state.bunq_me_tab_filter.visible,
+        bunqMeTabType: state.bunqMeTabFilter.type,
+        bunqMeTabVisibility: state.bunqMeTabFilter.visible,
         requestType: state.request_filter.type,
         requestVisibility: state.request_filter.visible,
-        dateFromFilter: state.date_filter.from_date,
-        dateToFilter: state.date_filter.to_date,
+        dateFromFilter: state.dateFilter.from_date,
+        dateToFilter: state.dateFilter.to_date,
         generalFilterDate: state.general_filter.date,
 
-        amountFilterAmount: state.amount_filter.amount,
-        amountFilterType: state.amount_filter.type,
+        amountFilterAmount: state.amountFilter.amount,
+        amountFilterType: state.amountFilter.type,
 
-        selectedCategories: state.category_filter.selected_categories,
-        toggleCategoryIds: state.category_filter.toggle,
-        selectedAccountIds: state.account_id_filter.selected_account_ids,
-        toggleAccountIds: state.account_id_filter.toggle,
-        selectedCardIds: state.card_id_filter.selected_card_ids,
-        toggleCardIds: state.card_id_filter.toggle,
+        selectedCategories: state.categoryFilter.selected_categories,
+        toggleCategoryIds: state.categoryFilter.toggle,
+        selectedAccountIds: state.accountIdFilter.selectedAccountIds,
+        toggleAccountIds: state.accountIdFilter.toggle,
+        selectedCardIds: state.cardIdFilter.selected_card_ids,
+        toggleCardIds: state.cardIdFilter.toggle,
 
         categories: state.categories.categories,
         categoryConnections: state.categories.category_connections,
@@ -389,9 +401,9 @@ const mapStateToProps = state => {
         payments: state.payments.payments,
         paymentsLoading: state.payments.loading,
 
-        bunqMeTabs: state.bunq_me_tabs.bunq_me_tabs,
-        bunqMeTabsLoading: state.bunq_me_tabs.loading,
-        bunqMeTabLoading: state.bunq_me_tab.loading,
+        bunqMeTabs: state.bunqMeTabs.bunq_me_tabs,
+        bunqMeTabsLoading: state.bunqMeTabs.loading,
+        bunqMeTabLoading: state.bunqMeTab.loading,
 
         masterCardActions: state.master_card_actions.master_card_actions,
         masterCardActionsLoading: state.master_card_actions.loading,
@@ -414,12 +426,11 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
         bunqMeTabPut: (userId, accountId, tabId, status) =>
-            dispatch(bunqMeTabPut(BunqJSClient, userId, accountId, tabId, status)),
+            dispatch(bunqMeTabPut(userId, accountId, tabId, status)),
         firstPage: () => dispatch(firstPage()),
         nextPage: () => dispatch(nextPage()),
         previousPage: () => dispatch(previousPage()),
diff --git a/src/components/CombinedList/EventData.tsx b/src/components/CombinedList/EventData.tsx
index 2057f580..64813b84 100644
--- a/src/components/CombinedList/EventData.tsx
+++ b/src/components/CombinedList/EventData.tsx
@@ -26,7 +26,15 @@ const styles = {
     }
 };
 
-class EventData extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class EventData extends React.Component<IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {};
diff --git a/src/components/FileUpload/FilePicker.tsx b/src/components/FileUpload/FilePicker.tsx
index 82011a0b..ad98d1cd 100644
--- a/src/components/FileUpload/FilePicker.tsx
+++ b/src/components/FileUpload/FilePicker.tsx
@@ -36,7 +36,15 @@ const styles = {
 
 const allowedFileTypes = ["image/jpeg", "image/png", "image/gif"];
 
-class FilePicker extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class FilePicker extends React.Component<IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
diff --git a/src/components/FileUpload/UploadFullscreen.tsx b/src/components/FileUpload/UploadFullscreen.tsx
index d68b91db..95c8d8c5 100644
--- a/src/components/FileUpload/UploadFullscreen.tsx
+++ b/src/components/FileUpload/UploadFullscreen.tsx
@@ -5,12 +5,12 @@ import Dialog from "@material-ui/core/Dialog";
 import Typography from "@material-ui/core/Typography";
 import Slide from "@material-ui/core/Slide";
 import TranslateButton from "~components/TranslationHelpers/Button";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import FilePicker from "./FilePicker";
 
 import { actions as snackbarActions } from "~store/snackbar";
 
-
 const Transition = props => <Slide direction={"up"} {...props} />;
 
 const contentSize = 320;
@@ -42,7 +42,20 @@ const styles = {
     }
 };
 
-class UploadFullscreen extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class UploadFullscreen extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    static defaultProps = {
+        headlineText: "Upload a new avatar",
+        buttonText: "Upload"
+    };
+
+    state: IState;
+
     constructor(props) {
         super(props);
 
@@ -141,16 +154,11 @@ class UploadFullscreen extends React.Component {
     }
 }
 
-UploadFullscreen.defaultProps = {
-    headlineText: "Upload a new avatar",
-    buttonText: "Upload"
-};
-
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {};
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message }))
     };
diff --git a/src/components/FilterComponents/AccountSelection.tsx b/src/components/FilterComponents/AccountSelection.tsx
index 82e89dad..acac237d 100644
--- a/src/components/FilterComponents/AccountSelection.tsx
+++ b/src/components/FilterComponents/AccountSelection.tsx
@@ -1,3 +1,4 @@
+import BunqJSClient from "@bunq-community/bunq-js-client";
 import React from "react";
 import { connect } from "react-redux";
 import Avatar from "@material-ui/core/Avatar";
@@ -12,6 +13,8 @@ import Tooltip from "@material-ui/core/Tooltip";
 
 import AddIcon from "@material-ui/icons/Add";
 import FilterListIcon from "@material-ui/icons/FilterList";
+import { AppWindow } from "~app";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
 
@@ -28,7 +31,18 @@ const styles = {
     }
 };
 
-class AccountSelection extends React.Component {
+interface IProps {
+  BunqJSClient: BunqJSClient;
+  t: AppWindow['t'];
+}
+
+interface IState {
+  anchorEl: HTMLElement | null;
+}
+
+class AccountSelection extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -68,7 +82,6 @@ class AccountSelection extends React.Component {
                 <IconButton onClick={this.removeAccountId(account.id)}>
                     <Avatar>
                         <LazyAttachmentImage
-                            BunqJSClient={this.props.BunqJSClient}
                             imageUUID={account.avatar.image[0].attachment_public_uuid}
                             style={{ width: 40, height: 40 }}
                         />
@@ -99,7 +112,6 @@ class AccountSelection extends React.Component {
                             <Avatar style={styles.bigAvatar}>
                                 <LazyAttachmentImage
                                     height={40}
-                                    BunqJSClient={this.props.BunqJSClient}
                                     imageUUID={account.avatar.image[0].attachment_public_uuid}
                                 />
                             </Avatar>
@@ -138,16 +150,16 @@ class AccountSelection extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         accounts: state.accounts.accounts,
 
-        selectedAccountIds: state.account_id_filter.selected_account_ids,
-        toggleAccountIds: state.account_id_filter.toggle
+        selectedAccountIds: state.accountIdFilter.selectedAccountIds,
+        toggleAccountIds: state.accountIdFilter.toggle
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         addAccountIdFilter: accountId => dispatch(addAccountIdFilter(accountId)),
         removeAccountIdFilter: index => dispatch(removeAccountIdFilter(index)),
diff --git a/src/components/FilterComponents/AmountFilter.tsx b/src/components/FilterComponents/AmountFilter.tsx
index f3507447..004674ce 100644
--- a/src/components/FilterComponents/AmountFilter.tsx
+++ b/src/components/FilterComponents/AmountFilter.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { connect } from "react-redux";
 import Select from "@material-ui/core/Select";
 import MenuItem from "@material-ui/core/MenuItem";
@@ -7,8 +7,21 @@ import InputLabel from "@material-ui/core/InputLabel";
 import FormControl from "@material-ui/core/FormControl";
 
 import { setAmountFilterAmount, setAmountFilterType, clearAmountFilter } from "~actions/filters";
+import { AppWindow } from "~app";
+import { AppDispatch, ReduxState } from "~store/index";
+
+interface IProps {
+    style: CSSProperties;
+    t: AppWindow['t'];
+}
+
+interface IState {
+
+}
+
+class AmountFilter extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
-class AmountFilter extends React.Component {
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -45,14 +58,14 @@ class AmountFilter extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
-        amountFilterAmount: state.amount_filter.amount,
-        amountFilterType: state.amount_filter.type
+        amountFilterAmount: state.amountFilter.amount,
+        amountFilterType: state.amountFilter.type
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         setAmountFilterAmount: amount => dispatch(setAmountFilterAmount(amount)),
         setAmountFilterType: amount => dispatch(setAmountFilterType(amount))
diff --git a/src/components/FilterComponents/CardSelection.tsx b/src/components/FilterComponents/CardSelection.tsx
index a408029b..fbc2672c 100644
--- a/src/components/FilterComponents/CardSelection.tsx
+++ b/src/components/FilterComponents/CardSelection.tsx
@@ -13,8 +13,10 @@ import Tooltip from "@material-ui/core/Tooltip";
 
 import AddIcon from "@material-ui/icons/Add";
 import FilterListIcon from "@material-ui/icons/FilterList";
+import { isBoolean } from "util";
 
 import { addCardIdFilter, removeCardIdFilter, toggleCardIdFilter } from "~actions/filters";
+import { AppWindow } from "~app";
 import { getCardTypeImage } from "~pages/Cards/CardListItem";
 import { getCardDescription } from "~functions/Utils";
 import { cardsUpdate } from "~store/cards/thunks";
@@ -46,7 +48,14 @@ const styles: any = {
     }
 };
 
-class CardSelection extends React.Component<any> {
+interface IState {
+}
+
+interface IProps {
+    t: AppWindow['t'];
+}
+
+class CardSelection extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
     state: any;
 
     constructor(props, context) {
diff --git a/src/components/FilterComponents/CategorySelection.tsx b/src/components/FilterComponents/CategorySelection.tsx
index 00861661..455d2a99 100644
--- a/src/components/FilterComponents/CategorySelection.tsx
+++ b/src/components/FilterComponents/CategorySelection.tsx
@@ -11,6 +11,8 @@ import Tooltip from "@material-ui/core/Tooltip";
 
 import AddIcon from "@material-ui/icons/Add";
 import FilterListIcon from "@material-ui/icons/FilterList";
+import { AppWindow } from "~app";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import CustomIcon from "../CustomIcon";
 import CategoryIcon from "../Categories/CategoryIcon";
@@ -29,7 +31,17 @@ const styles = {
     }
 };
 
-class CategorySelection extends React.Component {
+interface IState {
+    anchorEl: HTMLElement | null;
+}
+
+interface IProps {
+    t: AppWindow['t'];
+}
+
+class CategorySelection extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -78,7 +90,7 @@ class CategorySelection extends React.Component {
             const category = categories[categoryId];
 
             // don't display already selected items
-            if (selectedCategories.includes(categoryId)) {
+            if (selectedCategories.includes(+categoryId)) {
                 return null;
             }
 
@@ -137,16 +149,16 @@ class CategorySelection extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         categories: state.categories.categories,
 
-        toggleCategoryFilter: state.category_filter.toggle,
-        selectedCategories: state.category_filter.selected_categories
+        toggleCategoryFilter: state.categoryFilter.toggle,
+        selectedCategories: state.categoryFilter.selected_categories
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         toggleCategoryIdFilter: () => dispatch(toggleCategoryIdFilter()),
         addCategoryId: categoryId => dispatch(addCategoryIdFilter(categoryId)),
diff --git a/src/components/FilterComponents/ClearFilter.tsx b/src/components/FilterComponents/ClearFilter.tsx
index 2ba49d89..fdf2262c 100644
--- a/src/components/FilterComponents/ClearFilter.tsx
+++ b/src/components/FilterComponents/ClearFilter.tsx
@@ -3,12 +3,28 @@ import { connect } from "react-redux";
 import Button from "@material-ui/core/Button";
 import IconButton from "@material-ui/core/IconButton";
 import ClearIcon from "@material-ui/icons/Clear";
+import { AppWindow } from "~app";
 
 import FilterDisabledChecker from "~functions/FilterDisabledChecker";
 
 import { resetFilters } from "~actions/filters";
+import { AppDispatch, ReduxState } from "~store/index";
+
+interface IState {
+}
+
+interface IProps {
+    t: AppWindow['t'];
+}
+
+class ClearFilter extends React.PureComponent<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    static defaultProps = {
+        bigButton: false,
+        buttonProps: {}
+    };
+
+    state: IState;
 
-class ClearFilter extends React.PureComponent {
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -28,7 +44,8 @@ class ClearFilter extends React.PureComponent {
             paymentVisibility,
             bunqMeTabVisibility,
             requestVisibility,
-            amountFilterAmount
+            amountFilterAmount,
+            t,
         } = this.props;
 
         if (
@@ -63,35 +80,30 @@ class ClearFilter extends React.PureComponent {
     }
 }
 
-ClearFilter.defaultProps = {
-    bigButton: false,
-    buttonProps: {}
-};
-
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         searchTerm: state.search_filter.search_term,
         paymentType: state.payment_filter.type,
         paymentVisibility: state.payment_filter.visible,
-        bunqMeTabType: state.bunq_me_tab_filter.type,
-        bunqMeTabVisibility: state.bunq_me_tab_filter.visible,
+        bunqMeTabType: state.bunqMeTabFilter.type,
+        bunqMeTabVisibility: state.bunqMeTabFilter.visible,
         requestType: state.request_filter.type,
         requestVisibility: state.request_filter.visible,
-        dateFromFilter: state.date_filter.from_date,
-        dateToFilter: state.date_filter.to_date,
+        dateFromFilter: state.dateFilter.from_date,
+        dateToFilter: state.dateFilter.to_date,
 
-        selectedCategories: state.category_filter.selected_categories,
-        toggleCategoryIds: state.category_filter.toggle,
-        selectedAccountIds: state.account_id_filter.selected_account_ids,
-        toggleAccountIds: state.account_id_filter.toggle,
-        selectedCardIds: state.card_id_filter.selected_card_ids,
-        toggleCardIds: state.card_id_filter.toggle,
+        selectedCategories: state.categoryFilter.selected_categories,
+        toggleCategoryIds: state.categoryFilter.toggle,
+        selectedAccountIds: state.accountIdFilter.selectedAccountIds,
+        toggleAccountIds: state.accountIdFilter.toggle,
+        selectedCardIds: state.cardIdFilter.selected_card_ids,
+        toggleCardIds: state.cardIdFilter.toggle,
 
-        amountFilterAmount: state.amount_filter.amount
+        amountFilterAmount: state.amountFilter.amount
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         resetFilters: () => dispatch(resetFilters())
     };
diff --git a/src/components/FilterComponents/FilterDrawer.tsx b/src/components/FilterComponents/FilterDrawer.tsx
index d4e9deed..dd7b5f3c 100644
--- a/src/components/FilterComponents/FilterDrawer.tsx
+++ b/src/components/FilterComponents/FilterDrawer.tsx
@@ -42,6 +42,7 @@ import {
     clearToDateFilter,
     resetFilters
 } from "~actions/filters";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import SearchFilter from "./SearchFilter";
 import AccountSelection from "./AccountSelection";
@@ -101,7 +102,23 @@ const styles = {
     }
 };
 
-class FilterDrawer extends React.Component {
+interface IProps {
+
+}
+
+interface IState {
+
+}
+
+class FilterDrawer extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    static defaultProps = {
+        bigButton: false,
+        buttonProps: {},
+        buttonContent: null
+    };
+
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -401,7 +418,7 @@ class FilterDrawer extends React.Component {
 
                 <CategorySelection t={t} />
 
-                <AccountSelection BunqJSClient={this.props.BunqJSClient} t={t} />
+                <AccountSelection t={t} />
 
                 <CardSelection t={t} />
 
@@ -445,29 +462,23 @@ class FilterDrawer extends React.Component {
     }
 }
 
-FilterDrawer.defaultProps = {
-    bigButton: false,
-    buttonProps: {},
-    buttonContent: null
-};
-
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         paymentType: state.payment_filter.type,
         paymentVisibility: state.payment_filter.visible,
 
-        bunqMeTabType: state.bunq_me_tab_filter.type,
-        bunqMeTabVisibility: state.bunq_me_tab_filter.visible,
+        bunqMeTabType: state.bunqMeTabFilter.type,
+        bunqMeTabVisibility: state.bunqMeTabFilter.visible,
 
         requestType: state.request_filter.type,
         requestVisibility: state.request_filter.visible,
 
-        dateFromFilter: state.date_filter.from_date,
-        dateToFilter: state.date_filter.to_date
+        dateFromFilter: state.dateFilter.from_date,
+        dateToFilter: state.dateFilter.to_date
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         resetFilters: () => dispatch(resetFilters()),
 
diff --git a/src/components/FilterComponents/SearchFilter.tsx b/src/components/FilterComponents/SearchFilter.tsx
index a4e3ecac..a726cf43 100644
--- a/src/components/FilterComponents/SearchFilter.tsx
+++ b/src/components/FilterComponents/SearchFilter.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { connect } from "react-redux";
 import TextField from "@material-ui/core/TextField";
 import IconButton from "@material-ui/core/IconButton";
@@ -7,8 +7,24 @@ import InputAdornment from "@material-ui/core/InputAdornment";
 import ClearIcon from "@material-ui/icons/Clear";
 
 import { setSearchFilter, clearSearchFilter } from "~actions/filters";
+import { AppWindow } from "~app";
+import { AppDispatch, ReduxState } from "~store/index";
+
+interface IState {
+}
+
+interface IProps {
+    t: AppWindow['t'];
+    style: CSSProperties;
+}
+
+class SearchFilter extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    static defaultProps = {
+        style: {}
+    };
+
+    state: IState;
 
-class SearchFilter extends React.Component {
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -40,17 +56,13 @@ class SearchFilter extends React.Component {
     }
 }
 
-SearchFilter.defaultProps = {
-    style: {}
-};
-
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         searchTerm: state.search_filter.search_term
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         setSearchFilter: searchTerm => dispatch(setSearchFilter(searchTerm)),
         clearSearchFilter: () => dispatch(clearSearchFilter())
diff --git a/src/components/FormFields/AccountSelectorDialog.tsx b/src/components/FormFields/AccountSelectorDialog.tsx
index 8b96e13f..3edcac11 100644
--- a/src/components/FormFields/AccountSelectorDialog.tsx
+++ b/src/components/FormFields/AccountSelectorDialog.tsx
@@ -10,6 +10,7 @@ import ListItemText from "@material-ui/core/ListItemText";
 import Dialog from "@material-ui/core/Dialog";
 import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
+import { ReduxState } from "~store/index";
 
 import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
 
@@ -30,7 +31,7 @@ const styles = {
     }
 };
 
-const AccountItem = ({ account, onClick, BunqJSClient, hideBalance, shareInviteMonetaryAccountResponses }) => {
+const AccountItem = ({ account, onClick, hideBalance, shareInviteMonetaryAccountResponses }) => {
     // format default balance
     let formattedBalance = account.balance ? account.balance.value : 0;
 
@@ -54,7 +55,6 @@ const AccountItem = ({ account, onClick, BunqJSClient, hideBalance, shareInviteM
             <Avatar style={styles.bigAvatar}>
                 <LazyAttachmentImage
                     height={50}
-                    BunqJSClient={BunqJSClient}
                     imageUUID={account.avatar.image[0].attachment_public_uuid}
                 />
             </Avatar>
@@ -63,7 +63,23 @@ const AccountItem = ({ account, onClick, BunqJSClient, hideBalance, shareInviteM
     );
 };
 
-class AccountSelectorDialog extends React.Component {
+interface IState {
+}
+
+interface IProps {
+    value: any;
+    onChange: Function;
+}
+
+class AccountSelectorDialog extends React.Component<ReturnType<typeof mapStateToProps> & IProps> {
+    static defaultProps = {
+        hiddenConnectTypes: [],
+        style: styles.formControl,
+        selectStyle: styles.selectField
+    };
+
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -89,7 +105,6 @@ class AccountSelectorDialog extends React.Component {
 
     render() {
         const {
-            BunqJSClient,
             accounts,
             value,
             hiddenConnectTypes,
@@ -135,7 +150,6 @@ class AccountSelectorDialog extends React.Component {
                         shareInviteMonetaryAccountResponses={shareInviteMonetaryAccountResponses}
                         onClick={this.onClickHandler(accountKey)}
                         hideBalance={this.props.hideBalance}
-                        BunqJSClient={BunqJSClient}
                         account={account}
                     />
                 );
@@ -147,7 +161,6 @@ class AccountSelectorDialog extends React.Component {
                 <AccountItem
                     shareInviteMonetaryAccountResponses={shareInviteMonetaryAccountResponses}
                     hideBalance={this.props.hideBalance}
-                    BunqJSClient={BunqJSClient}
                     account={accounts[value]}
                     onClick={this.openDialog}
                 />
@@ -174,18 +187,7 @@ class AccountSelectorDialog extends React.Component {
     }
 }
 
-AccountSelectorDialog.propTypes = {
-    value: PropTypes.any.isRequired,
-    onChange: PropTypes.func.isRequired
-};
-
-AccountSelectorDialog.defaultProps = {
-    hiddenConnectTypes: [],
-    style: styles.formControl,
-    selectStyle: styles.selectField
-};
-
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         shareInviteMonetaryAccountResponses:
             state.share_invite_monetary_account_responses.share_invite_monetary_account_responses,
diff --git a/src/components/FormFields/ColorPicker.tsx b/src/components/FormFields/ColorPicker.tsx
index e7ab9474..cf47da4a 100644
--- a/src/components/FormFields/ColorPicker.tsx
+++ b/src/components/FormFields/ColorPicker.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { translate } from "react-i18next";
 import ChromePicker from "react-color/lib/Chrome";
 import Button from "@material-ui/core/Button";
@@ -19,7 +18,21 @@ const styles = {
     }
 };
 
-class ColorPicker extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class ColorPicker extends React.Component<IProps> {
+    static defaultProps = {
+        style: {},
+        buttonStyle: {},
+        buttonProps: {}
+    };
+
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -56,14 +69,4 @@ class ColorPicker extends React.Component {
     }
 }
 
-ColorPicker.defaultProps = {
-    style: {},
-    buttonStyle: {},
-    buttonProps: {}
-};
-
-ColorPicker.propTypes = {
-    pickerProps: PropTypes.object.isRequired
-};
-
 export default translate("translations")(ColorPicker);
diff --git a/src/components/FormFields/EmailSuggestions.tsx b/src/components/FormFields/EmailSuggestions.tsx
index d627901b..f1ab57e2 100644
--- a/src/components/FormFields/EmailSuggestions.tsx
+++ b/src/components/FormFields/EmailSuggestions.tsx
@@ -18,7 +18,15 @@ const styles = {
     }
 };
 
-class EmailSuggestions extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class EmailSuggestions extends React.Component<IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -94,8 +102,4 @@ class EmailSuggestions extends React.Component {
     }
 }
 
-EmailSuggestions.propTypes = {
-    // itemSelected: PropTypes.func.isRequired
-};
-
 export default EmailSuggestions;
diff --git a/src/components/FormFields/TargetSelection.tsx b/src/components/FormFields/TargetSelection.tsx
index a0d89d6f..fc7d5cf5 100644
--- a/src/components/FormFields/TargetSelection.tsx
+++ b/src/components/FormFields/TargetSelection.tsx
@@ -112,7 +112,6 @@ class TargetSelection extends React.Component<any> {
                         value={this.props.selectedTargetAccount}
                         onChange={this.props.handleChangeDirect("selectedTargetAccount")}
                         accounts={this.props.accounts}
-                        BunqJSClient={this.props.BunqJSClient}
                     />
                 );
                 break;
diff --git a/src/components/GeoLocation/GeoLocationMap.tsx b/src/components/GeoLocation/GeoLocationMap.tsx
index 99395280..b7d738dd 100644
--- a/src/components/GeoLocation/GeoLocationMap.tsx
+++ b/src/components/GeoLocation/GeoLocationMap.tsx
@@ -7,6 +7,7 @@ import MarkerIcon from "@material-ui/icons/LocationOn";
 
 // import the mapbox css sheet
 import "mapbox-gl/dist/mapbox-gl.css";
+import { ReduxState } from "~store/index";
 
 const MAPBOX_TOKEN =
     "pk.eyJ1IjoiYnVucWNvbW11bml0eSIsImEiOiJjam1uZnExcjgwcjEzM3ZwazhuaDBmNWw1In0.iKFjMHlXQ8PkvTagdi74-w";
@@ -18,8 +19,23 @@ const styles = {
     }
 };
 
-class GeoLocationMap extends React.Component {
-    state = {
+interface IState {
+    show: boolean;
+    mapStyle: string;
+    mapStyleMode: string;
+    viewport: {
+        zoom: number;
+        pitch: number;
+        height: number;
+        width: number;
+    }
+}
+
+interface IProps {
+}
+
+class GeoLocationMap extends React.Component<ReturnType<typeof mapStateToProps> & IProps> {
+    state: IState = {
         show: false,
         mapStyle: "mapbox://styles/bunqcommunity/cjmngc001153m2ss143lhxlzw",
         mapStyleMode: "none",
@@ -42,6 +58,7 @@ class GeoLocationMap extends React.Component {
             }
         });
     }
+
     componentDidUpdate() {
         this.updateMap();
     }
@@ -139,7 +156,7 @@ class GeoLocationMap extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         theme: state.options.theme
     };
diff --git a/src/components/GeoLocation/GeoLocationView.tsx b/src/components/GeoLocation/GeoLocationView.tsx
index 8b8fd757..5aeb38f9 100644
--- a/src/components/GeoLocation/GeoLocationView.tsx
+++ b/src/components/GeoLocation/GeoLocationView.tsx
@@ -18,7 +18,19 @@ const styles = {
     }
 };
 
-class GeoLocationView extends React.PureComponent {
+interface IState {
+}
+
+interface IProps {
+}
+
+class GeoLocationView extends React.PureComponent<IProps> {
+    static defaultProps = {
+        visible: false
+    };
+
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -32,7 +44,7 @@ class GeoLocationView extends React.PureComponent {
         return (
             <Dialog fullScreen style={styles.dialog} open={visible} TransitionComponent={Transition}>
                 <div style={styles.content} ref={this.containerRef}>
-                    <GeoLocationMap t={t} geoLocation={geoLocation} containerRef={this.containerRef} />
+                    <GeoLocationMap t={t} geoLocation={geoLocation} containerRef={this.containerRef}/>
                 </div>
                 <TranslateButton
                     onClick={this.props.onClose}
@@ -50,8 +62,4 @@ class GeoLocationView extends React.PureComponent {
     }
 }
 
-GeoLocationView.defaultProps = {
-    visible: false
-};
-
 export default GeoLocationView;
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 56596073..8be72e34 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,3 +1,4 @@
+import BunqJSClient from "@bunq-community/bunq-js-client";
 import React from "react";
 import { translate } from "react-i18next";
 import { connect } from "react-redux";
@@ -128,7 +129,7 @@ class Layout extends React.Component<ReturnType<typeof mapStateToProps> & Return
     }
 
     componentDidMount() {
-        this.props.BunqJSClient.run(false)
+        window.BunqDesktopClient.BunqJSClient.run(false)
             .then(_ => {})
             .catch(error => {});
 
@@ -254,7 +255,6 @@ class Layout extends React.Component<ReturnType<typeof mapStateToProps> & Return
             // uniqueness to help with triggering route change animations
             key: this.props.location.pathname,
             // give all routes access to bunq-js-client
-            BunqJSClient: this.props.BunqJSClient,
             // modal and snackbar helpers
             openModal: this.props.openModal,
             themeList: ThemeList,
@@ -283,10 +283,10 @@ class Layout extends React.Component<ReturnType<typeof mapStateToProps> & Return
                     <RuleCollectionChecker updateToggle={isLoading} />
                     <NetworkStatusChecker />
 
-                    <QueueManager BunqJSClient={this.props.BunqJSClient} />
+                    <QueueManager />
 
-                    <Header BunqJSClient={this.props.BunqJSClient} />
-                    <Sidebar BunqJSClient={this.props.BunqJSClient} location={this.props.location} />
+                    <Header />
+                    <Sidebar location={this.props.location} />
                     <Grid
                         container
                         spacing={16}
diff --git a/src/components/ListItems/BunqMeTabListItem.tsx b/src/components/ListItems/BunqMeTabListItem.tsx
index 8fc6a9f0..5e5d5f38 100644
--- a/src/components/ListItems/BunqMeTabListItem.tsx
+++ b/src/components/ListItems/BunqMeTabListItem.tsx
@@ -178,7 +178,6 @@ class BunqMeTabListItem extends React.Component {
                             <PaymentListItem
                                 accounts={accounts}
                                 payment={bunqMeTabPayment.payment.Payment}
-                                BunqJSClient={this.props.BunqJSClient}
                             />
                         );
                     })}
diff --git a/src/components/ListItems/MasterCardActionListItem.tsx b/src/components/ListItems/MasterCardActionListItem.tsx
index cc61046c..1315a589 100644
--- a/src/components/ListItems/MasterCardActionListItem.tsx
+++ b/src/components/ListItems/MasterCardActionListItem.tsx
@@ -73,7 +73,6 @@ class MasterCardActionListItem extends React.Component {
                     <LazyAttachmentImage
                         height={50}
                         defaultImage={defaultImage}
-                        BunqJSClient={this.props.BunqJSClient}
                         imageUUID={imageUUID}
                     />
                 </Avatar>
diff --git a/src/components/ListItems/PaymentListItem.tsx b/src/components/ListItems/PaymentListItem.tsx
index 3d0df3c8..a36219c9 100644
--- a/src/components/ListItems/PaymentListItem.tsx
+++ b/src/components/ListItems/PaymentListItem.tsx
@@ -116,7 +116,6 @@ class PaymentListItem extends React.Component {
                     <LazyAttachmentImage
                         height={50}
                         defaultImage={defaultImage}
-                        BunqJSClient={this.props.BunqJSClient}
                         imageUUID={imageUUID}
                     />
                 </Avatar>
diff --git a/src/components/ListItems/RequestInquiryBatchListItem.tsx b/src/components/ListItems/RequestInquiryBatchListItem.tsx
index 000b7624..58dd1579 100644
--- a/src/components/ListItems/RequestInquiryBatchListItem.tsx
+++ b/src/components/ListItems/RequestInquiryBatchListItem.tsx
@@ -152,7 +152,7 @@ class RequestInquiryBatchListItem extends React.Component {
         const avatarStandalone = (
             <Avatar style={styles.smallAvatar}>
                 {imageUUID ? (
-                    <LazyAttachmentImage height={50} BunqJSClient={this.props.BunqJSClient} imageUUID={imageUUID} />
+                    <LazyAttachmentImage height={50} imageUUID={imageUUID} />
                 ) : (
                     shareIcon
                 )}
@@ -240,7 +240,6 @@ class RequestInquiryBatchListItem extends React.Component {
                         return (
                             <RequestInquiryListItem
                                 requestInquiry={requestInquiry}
-                                BunqJSClient={this.props.BunqJSClient}
                             />
                         );
                     })}
diff --git a/src/components/ListItems/RequestInquiryListItem.tsx b/src/components/ListItems/RequestInquiryListItem.tsx
index 8f0960da..b4589b2b 100644
--- a/src/components/ListItems/RequestInquiryListItem.tsx
+++ b/src/components/ListItems/RequestInquiryListItem.tsx
@@ -70,7 +70,7 @@ class RequestInquiryListItem extends React.Component {
                 to={`/request-inquiry-info/${requestInquiry.id}/${requestInquiry.monetary_account_id}`}
             >
                 <Avatar style={styles.smallAvatar}>
-                    <LazyAttachmentImage height={50} BunqJSClient={this.props.BunqJSClient} imageUUID={imageUUID} />
+                    <LazyAttachmentImage height={50} imageUUID={imageUUID} />
                 </Avatar>
                 <ListItemText style={styles.listItemText} primary={displayName} secondary={paymentLabel} />
                 <ListItemSecondaryAction style={styles.listItemSecondary}>
diff --git a/src/components/ListItems/RequestResponseListItem.tsx b/src/components/ListItems/RequestResponseListItem.tsx
index 7255fead..76924e7d 100644
--- a/src/components/ListItems/RequestResponseListItem.tsx
+++ b/src/components/ListItems/RequestResponseListItem.tsx
@@ -78,7 +78,6 @@ class RequestResponseListItem extends React.Component {
                     <LazyAttachmentImage
                         height={50}
                         defaultImage={defaultImage}
-                        BunqJSClient={this.props.BunqJSClient}
                         imageUUID={imageUUID}
                     />
                 </Avatar>
diff --git a/src/components/ListItems/ShareInviteMonetaryAccountInquiryListItem.tsx b/src/components/ListItems/ShareInviteMonetaryAccountInquiryListItem.tsx
index a11f7eb6..8f2ff868 100644
--- a/src/components/ListItems/ShareInviteMonetaryAccountInquiryListItem.tsx
+++ b/src/components/ListItems/ShareInviteMonetaryAccountInquiryListItem.tsx
@@ -39,10 +39,11 @@ class ShareInviteMonetaryAccountInquiryListItem extends React.Component {
     }
 
     cancel = event => {
-        const { t, BunqJSClient, user, shareInviteMonetaryAccountInquiry } = this.props;
+        const { t, user, shareInviteMonetaryAccountInquiry } = this.props;
 
         const success = t("The share request was successfully revoked");
         const failed = t("Failed to revoke the share request");
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
         if (!this.state.loading) {
             this.setState({ loading: true });
@@ -119,7 +120,7 @@ class ShareInviteMonetaryAccountInquiryListItem extends React.Component {
         return [
             <ListItem button onClick={e => this.setState({ open: !this.state.open })}>
                 <Avatar style={styles.smallAvatar}>
-                    <LazyAttachmentImage height={50} BunqJSClient={this.props.BunqJSClient} imageUUID={imageUUID} />
+                    <LazyAttachmentImage height={50} imageUUID={imageUUID} />
                 </Avatar>
                 <ListItemText style={styles.listItemText} primary={displayName} secondary={t("Connect invite sent")} />
                 <ListItemSecondaryAction />
@@ -148,7 +149,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
         shareInviteMonetaryAccountInquiriesInfoUpdate: userId =>
-            dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(BunqJSClient, userId))
+            dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(userId))
     };
 };
 export default connect(
diff --git a/src/components/ListItems/ShareInviteMonetaryAccountResponseListItem.tsx b/src/components/ListItems/ShareInviteMonetaryAccountResponseListItem.tsx
index 8b0c1b36..ea61fc0c 100644
--- a/src/components/ListItems/ShareInviteMonetaryAccountResponseListItem.tsx
+++ b/src/components/ListItems/ShareInviteMonetaryAccountResponseListItem.tsx
@@ -39,10 +39,11 @@ class ShareInviteMonetaryAccountResponseListItem extends React.Component {
     }
 
     accept = event => {
-        const { t, BunqJSClient, user, shareInviteMonetaryAccountResponse } = this.props;
+        const { t, user, shareInviteMonetaryAccountResponse } = this.props;
 
         const success = t("The share request was successfully accepted");
         const failed = t("Failed to accept the share request");
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
         if (!this.state.loading) {
             this.setState({ loading: true });
@@ -64,10 +65,11 @@ class ShareInviteMonetaryAccountResponseListItem extends React.Component {
     };
 
     reject = event => {
-        const { t, BunqJSClient, user, shareInviteMonetaryAccountResponse } = this.props;
+        const { t, user, shareInviteMonetaryAccountResponse } = this.props;
 
         const success = t("The share request was successfully cancelled");
         const failed = t("Failed to reject the share request");
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
         if (!this.state.loading) {
             this.setState({ loading: true });
@@ -143,7 +145,7 @@ class ShareInviteMonetaryAccountResponseListItem extends React.Component {
         return [
             <ListItem button onClick={e => this.setState({ open: !this.state.open })}>
                 <Avatar style={styles.smallAvatar}>
-                    <LazyAttachmentImage height={50} BunqJSClient={this.props.BunqJSClient} imageUUID={imageUUID} />
+                    <LazyAttachmentImage height={50} imageUUID={imageUUID} />
                 </Avatar>
                 <ListItemText
                     style={styles.listItemText}
@@ -172,11 +174,10 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch) => {
     return {
         shareInviteMonetaryAccountResponsesInfoUpdate: userId =>
-            dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(BunqJSClient, userId))
+            dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(userId))
     };
 };
 export default connect(
diff --git a/src/components/NoteTexts/NoteTextForm.tsx b/src/components/NoteTexts/NoteTextForm.tsx
index 7db01d4e..33c8e13d 100644
--- a/src/components/NoteTexts/NoteTextForm.tsx
+++ b/src/components/NoteTexts/NoteTextForm.tsx
@@ -168,12 +168,11 @@ const mapStateToProps = state => {
 };
 
 const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
     return {
         noteTextsUpdate: (event_type, user_id, account_id, event_id) =>
-            dispatch(noteTextsUpdate(BunqJSClient, event_type, user_id, account_id, event_id)),
+            dispatch(noteTextsUpdate(event_type, user_id, account_id, event_id)),
         notesTextsAddNote: (event_type, user_id, account_id, event_id, content) =>
-            dispatch(notesTextsAddNote(BunqJSClient, event_type, user_id, account_id, event_id, content)),
+            dispatch(notesTextsAddNote(event_type, user_id, account_id, event_id, content)),
         // notesTextsUpdateNote: (
         //     event_type,
         //     user_id,
@@ -184,7 +183,6 @@ const mapDispatchToProps = (dispatch, ownProps) => {
         // ) =>
         //     dispatch(
         //         notesTextsUpdateNote(
-        //             BunqJSClient,
         //             event_type,
         //             user_id,
         //             account_id,
@@ -194,7 +192,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
         //         )
         //     ),
         notesTextsDeleteNote: (event_type, user_id, account_id, event_id, note_id) =>
-            dispatch(notesTextsDeleteNote(BunqJSClient, event_type, user_id, account_id, event_id, note_id))
+            dispatch(notesTextsDeleteNote(event_type, user_id, account_id, event_id, note_id))
     };
 };
 
diff --git a/src/components/QR/AccountQRFullscreen.tsx b/src/components/QR/AccountQRFullscreen.tsx
index e5bce148..9386eb52 100644
--- a/src/components/QR/AccountQRFullscreen.tsx
+++ b/src/components/QR/AccountQRFullscreen.tsx
@@ -89,7 +89,6 @@ class AccountQRFullscreen extends React.PureComponent {
                             <Avatar className={classes.bigAvatar}>
                                 <LazyAttachmentImage
                                     height={45}
-                                    BunqJSClient={this.props.BunqJSClient}
                                     imageUUID={accountInfo.avatar.image[0].attachment_public_uuid}
                                 />
                             </Avatar>
diff --git a/src/components/Queue/QueueManager.tsx b/src/components/Queue/QueueManager.tsx
index a574bd9b..a0dbaed4 100644
--- a/src/components/Queue/QueueManager.tsx
+++ b/src/components/Queue/QueueManager.tsx
@@ -1,3 +1,4 @@
+import BunqJSClient from "@bunq-community/bunq-js-client";
 import React from "react";
 import { ipcRenderer } from "electron";
 import { translate } from "react-i18next";
@@ -36,6 +37,7 @@ export const DEFAULT_EVENT_COUNT_LIMIT = 50;
 export const EVENT_TOTAL_LIMIT = 1000;
 
 interface IProps {
+    BunqJSClient: BunqJSClient;
 }
 
 interface IState {
diff --git a/src/components/RuleCollectionChecker.tsx b/src/components/RuleCollectionChecker.tsx
index 21dd6721..a61f19b8 100644
--- a/src/components/RuleCollectionChecker.tsx
+++ b/src/components/RuleCollectionChecker.tsx
@@ -4,6 +4,7 @@ import { connect } from "react-redux";
 import { actions as categoriesActions } from "~store/categories";
 import { actions as categoryRulesActions } from "~store/categoryRules";
 import { AppDispatch, ReduxState } from "~store/index";
+import RuleCollection from "~models/RuleCollection";
 
 // import typed worker
 const RuleCollectionCheckWorker = require("worker-loader!../webworkers/rule_collection_check.worker.js");
@@ -43,7 +44,8 @@ class RuleCollectionChecker extends React.Component<ReturnType<typeof mapStateTo
     handleWorkerEvent = eventResults => {
         const events = eventResults.data.result;
         const ruleCollectionId = eventResults.data.ruleCollectionId;
-        const ruleCollection = this.props.categoryRules[ruleCollectionId];
+        const ruleCollection = new RuleCollection();
+        ruleCollection.fromObject(this.props.categoryRules[ruleCollectionId]);
 
         // go through all events
         const newCategoryConnections = [];
@@ -71,11 +73,13 @@ class RuleCollectionChecker extends React.Component<ReturnType<typeof mapStateTo
         const requestInquiries = this.props.requestInquiries.map(item => item.toJSON());
         const requestResponses = this.props.requestResponses.map(item => item.toJSON());
         const masterCardActions = this.props.masterCardActions.map(item => item.toJSON());
-        const bunqMeTabs = this.props.bunqMeTabs.map(item => item.toJSON());
+        const bunqMeTabs = this.props.bunqMeTabs.map(item => JSON.stringify(item));
 
         // get results for all our rule collections
         Object.keys(this.props.categoryRules).forEach(categoryRuleId => {
-            const ruleCollection = this.props.categoryRules[categoryRuleId];
+            const ruleCollection = new RuleCollection();
+            ruleCollection.fromObject(this.props.categoryRules[categoryRuleId]);
+
             if (ruleCollection && ruleCollection.isEnabled()) {
                 this.worker.postMessage({
                     ruleCollection: ruleCollection,
diff --git a/src/components/TransactionHeader.tsx b/src/components/TransactionHeader.tsx
index 9763a56f..e1144c33 100644
--- a/src/components/TransactionHeader.tsx
+++ b/src/components/TransactionHeader.tsx
@@ -108,7 +108,6 @@ const TransactionHeader = props => {
                 <LazyAttachmentImage
                     height={90}
                     defaultImage={defaultImage}
-                    BunqJSClient={props.BunqJSClient}
                     imageUUID={fromAvatar}
                     style={{
                         cursor: fromIsCounterparty ? "pointer" : "default"
@@ -154,7 +153,6 @@ const TransactionHeader = props => {
                 <LazyAttachmentImage
                     height={90}
                     defaultImage={defaultImage}
-                    BunqJSClient={props.BunqJSClient}
                     imageUUID={toAvatar}
                     style={{
                         cursor: toIsCounterparty ? "pointer" : "default"
diff --git a/src/functions/BunqErrorHandler.ts b/src/functions/BunqErrorHandler.ts
index fc9dac9c..2188bde9 100644
--- a/src/functions/BunqErrorHandler.ts
+++ b/src/functions/BunqErrorHandler.ts
@@ -1,3 +1,4 @@
+import { AppWindow } from "~app";
 import BunqDesktopClient from "~components/BunqDesktopClient";
 import { BatchedActions } from "~store/index";
 import Logger from "./Logger";
@@ -9,7 +10,7 @@ import { actions as applicationActions } from "~store/application";
 
 import ErrorCodes from "@bunq-community/bunq-js-client/dist/Helpers/ErrorCodes";
 
-declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+declare let window: AppWindow;
 
 const defaultErrorMessage = (batchedActions: BatchedActions, customError: boolean | string = false) => {
     batchedActions.push(
@@ -83,9 +84,7 @@ export default (batchedActions: BatchedActions, error, customError: boolean | st
                     errorMessage = invalidAuthenticationError;
 
                     // reset to api screen if possible
-                    if (BunqJSClient) {
-                        batchedActions.push(registrationResetToApiScreen(BunqJSClient));
-                    }
+                    batchedActions.push(registrationResetToApiScreen());
                     break;
             }
 
diff --git a/src/models/MonetaryAccount.ts b/src/models/MonetaryAccount.ts
index 7005a12e..d6048b23 100644
--- a/src/models/MonetaryAccount.ts
+++ b/src/models/MonetaryAccount.ts
@@ -1,3 +1,4 @@
+import { IMonetaryAccount } from "~types/MonetaryAccount";
 import { AccountType, MonetaryAccountSetting, AllCoOwner, Alias, Avatar, Balance, Amount } from "~types/Types";
 
 import NotificationFilter from "@bunq-community/bunq-js-client/dist/Types/NotificationFilter";
@@ -67,10 +68,14 @@ export default class MonetaryAccount {
      * Used to store this object in JSON
      * @returns {string}
      */
-    public toJSON(): any {
+    public toJSON(): string {
         return this._rawData;
     }
 
+    public toPlainObject(): IMonetaryAccount {
+        return JSON.parse(this._rawData);
+    }
+
     /**
      * Returns the current account balance as float
      * @returns {number}
diff --git a/src/models/RuleCollection.ts b/src/models/RuleCollection.ts
new file mode 100644
index 00000000..13ff0fe6
--- /dev/null
+++ b/src/models/RuleCollection.ts
@@ -0,0 +1,547 @@
+import { generateGUID } from "~functions/Utils";
+import {
+    EventObjectMatchingRule,
+    EventObjectResult,
+    IRuleCollection,
+    RuleCollectionCheckRulesResult,
+    RuleCollectionMatchType,
+    ValidationResult,
+} from "~types/RuleCollection";
+import AccountRule from "~types/Rules/AccountRule";
+import { Rule } from "~types/Rules/Rule";
+import TransactionAmountRule from "~types/Rules/TransactionAmountRule";
+import TypeRule from "~types/Rules/TypeRule";
+import ValueRule from "~types/Rules/ValueRule";
+import { EventObject } from "~types/Types";
+
+export default class RuleCollection implements IRuleCollection {
+    public id: string | null = null;
+    public title: string = "";
+    public matchType: RuleCollectionMatchType = "OR";
+    public rules: Rule[] = [];
+    public categories: string[] = [];
+    public enabled: boolean;
+
+    constructor(rules: Rule[] = [], categories: string[] = []) {
+        this.rules = rules;
+        this.categories = categories;
+    }
+
+    public setRules(rules: Rule[]): void {
+        this.rules = rules;
+    }
+    public getRules(): Rule[] {
+        return this.rules;
+    }
+
+    public setCategories(categories: string[]): void {
+        this.categories = categories;
+    }
+    public getCategories(): string[] {
+        return this.categories;
+    }
+
+    public setTitle(title: string): void {
+        this.title = title;
+    }
+    public getTitle(): string {
+        return this.title;
+    }
+
+    public setEnabled(enabled: boolean): void {
+        this.enabled = enabled;
+    }
+    public isEnabled(): boolean {
+        return this.enabled;
+    }
+
+    public setMatchType(matchType: "OR" | "AND"): void {
+        this.matchType = matchType;
+    }
+    public getMatchType(): string {
+        return this.matchType;
+    }
+
+    public setId(id: string): void {
+        this.id = id;
+    }
+    public getId(): string {
+        return this.id;
+    }
+
+    /**
+     * Ensure a valid ID is set and generate a new one if not
+     */
+    public ensureId(): void {
+        if (!this.id || this.id.length === 0) {
+            this.generateId();
+        }
+    }
+
+    /**
+     * Generate a random ID for this collection
+     */
+    public generateId(): void {
+        this.id = generateGUID();
+    }
+
+    /**
+     * Goes through all events and returns the ones
+     * @param {EventObject[]} events
+     * @returns {EventObjectResult[]}
+     */
+    public filterItems(events: EventObject[]): EventObjectResult[] {
+        const resultingEvents: EventObjectResult[] = [];
+        const ruleCount = this.rules.length;
+
+        events.forEach((event: EventObject) => {
+            let matches = false;
+            let matchingRules: EventObjectMatchingRule[] = [];
+
+            if (ruleCount === 0) {
+                // if rule count is 0 it automatically matches nothing
+                matches = false;
+            } else {
+                const { ruleResult, matchedRules } = this.checkRules(event);
+                matches = ruleResult;
+                matchingRules = matchedRules;
+            }
+
+            // add this event to the resulting events list
+            resultingEvents.push({
+                item: event.item,
+                type: event.type,
+                matches: matches,
+                matchingRules: matchingRules
+            });
+        });
+
+        return resultingEvents;
+    }
+
+    /**
+     * Checks if a single item matches all the currently set rules
+     * @param {EventObject} event
+     * @returns {boolean}
+     */
+    public checkRules(event: EventObject): RuleCollectionCheckRulesResult {
+        const matchingRules: EventObjectMatchingRule[] = [];
+        let checkRuleResult = false;
+
+        if (this.matchType === "AND") {
+            // all rules should match so we return using "every" which returns true of all are true
+            checkRuleResult = this.rules.every((rule: Rule) => {
+                const ruleResult = this.checkRule(rule, event);
+                matchingRules.push({
+                    rule: rule,
+                    matched: ruleResult
+                });
+                return ruleResult;
+            });
+        } else {
+            // only one has to match so we return using "some" which stops on the first match
+            checkRuleResult = this.rules.some((rule: Rule) => {
+                const ruleResult = this.checkRule(rule, event);
+                matchingRules.push({
+                    rule: rule,
+                    matched: ruleResult
+                });
+                return ruleResult;
+            });
+        }
+
+        return {
+            ruleResult: checkRuleResult,
+            matchedRules: matchingRules
+        };
+    }
+
+    /**
+     * Checks if a single item matches a single rule
+     * @param {Rule} rule
+     * @param {EventObject} event
+     * @returns {boolean}
+     */
+    public checkRule(rule: Rule, event: EventObject): boolean {
+        // return an iterator function which has access to the event
+        switch (rule.ruleType) {
+            case "VALUE":
+                return this.checkValueRule(rule, event);
+            case "TRANSACTION_AMOUNT":
+                return this.checkTransactionAmountRule(rule, event);
+            case "ITEM_TYPE":
+                return this.checkItemTypeRule(rule, event);
+            case "ACCOUNT_TYPE":
+                return this.checkAccountTypeRule(rule, event);
+        }
+        return false;
+    }
+
+    /**
+     * Check if a field or custom field matches the given value
+     * @param {ValueRule} rule
+     * @param {EventObject} event
+     * @returns {boolean}
+     */
+    private checkValueRule(rule: ValueRule, event: EventObject): boolean {
+        let dataToCheck = [];
+        switch (rule.field) {
+            case "DESCRIPTION":
+                if (event.item.description) {
+                    dataToCheck.push(event.item.description);
+                }
+                break;
+            case "IBAN":
+                switch (event.type) {
+                    case "BunqMeTab":
+                    case "MasterCardAction":
+                        return false;
+
+                    case "Payment":
+                        // just check both
+                        const ibanAlias = event.item.alias.iban;
+                        const ibanCounterparty = event.item.alias.iban;
+
+                        // don't push invalid/missing iban values
+                        if (ibanAlias) dataToCheck.push(ibanAlias);
+                        if (ibanCounterparty) dataToCheck.push(ibanCounterparty);
+                        break;
+
+                    case "RequestResponse":
+                    case "RequestInquiry":
+                        const iban = event.item.counterparty_alias.iban;
+                        // return false if null
+                        if (iban === null) return false;
+                        dataToCheck.push(iban);
+                        break;
+                }
+
+                dataToCheck = null;
+                break;
+            case "COUNTERPARTY_NAME":
+                if (event.item.counterparty_alias) {
+                    dataToCheck.push(event.item.counterparty_alias.display_name);
+                }
+                break;
+            case "CUSTOM":
+                // split the custom field on . character
+                const customFieldParts = rule.customField.split(".");
+
+                let tempObject = event.item;
+                let failedToFind = false;
+                for (let key in customFieldParts) {
+                    const customFieldPart = customFieldParts[key];
+                    // more field parts but the previous wasn't found
+                    if (failedToFind === true) break;
+
+                    if (tempObject[customFieldPart]) {
+                        tempObject = tempObject[customFieldPart];
+                    } else {
+                        failedToFind = true;
+                    }
+                }
+
+                // if we found the custom item, add it to the list
+                if (failedToFind === false) {
+                    dataToCheck.push(tempObject);
+                }
+
+                break;
+            default:
+                return false;
+        }
+
+        // no data found or null so we return true of the rule value is empty
+        if (dataToCheck.length === 0) return rule.value && rule.value.length === 0;
+
+        // go through every item
+        let matchedItem = false;
+        for (var index in dataToCheck) {
+            const dataItem = dataToCheck[index];
+
+            const valueToCheck = dataItem.toString().toLowerCase();
+            const ruleValue = rule.value.toLowerCase();
+
+            switch (rule.matchType) {
+                case "REGEX":
+                    // create a regexp so we can directly use the input value
+                    const regex = new RegExp(rule.value, "igm");
+                    // test the data with the regex pattern
+                    matchedItem = regex.test(valueToCheck);
+                    break;
+                case "EXACT":
+                    matchedItem = valueToCheck === ruleValue;
+                    break;
+                case "CONTAINS":
+                    matchedItem = valueToCheck.includes(ruleValue);
+                    break;
+                case "ENDS_WITH":
+                    matchedItem = valueToCheck.endsWith(ruleValue);
+                    break;
+                case "STARTS_WITH":
+                    matchedItem = valueToCheck.startsWith(ruleValue);
+                    break;
+            }
+
+            // break out since we found a match already
+            if (matchedItem) break;
+        }
+
+        return matchedItem;
+    }
+
+    /**
+     * Check if for the event type the given amount that was transacted is higher/lower than the rule amount
+     * @param {TransactionAmountRule} rule
+     * @param {EventObject} event
+     * @returns {boolean}
+     */
+    private checkTransactionAmountRule(rule: TransactionAmountRule, event: EventObject): boolean {
+        let amount: number = 0;
+        switch (event.type) {
+            case "Payment":
+                amount = parseFloat(event.item.amount.value);
+                break;
+            case "BunqMeTab":
+                // no transaction amount for this so we ignore it
+                return false;
+            case "RequestInquiry":
+                if (event.item.status === "ACCEPTED") {
+                    // accepted so an amount was transferred
+                    amount = parseFloat(event.item.amount_responded.value);
+                } else {
+                    // invalid type, just return false
+                    return false;
+                }
+                break;
+            case "RequestResponse":
+                if (event.item.status === "ACCEPTED") {
+                    // accepted so an amount was transferred
+                    amount = parseFloat(event.item.amount_responded.value);
+                } else {
+                    // invalid type, just return false
+                    return false;
+                }
+                break;
+            case "MasterCardAction":
+                amount = parseFloat(event.item.amount_billing.value);
+                break;
+        }
+
+        // turn negative numbers into possitive numbers for outgoing payments
+        amount = amount < 0 ? amount * -1 : amount;
+
+        switch (rule.matchType) {
+            case "MORE":
+                return rule.amount < amount;
+            case "MORE_EQUALS":
+                return rule.amount <= amount;
+            case "EXACTLY":
+                return rule.amount === amount;
+            case "LESS":
+                return rule.amount > amount;
+            case "LESS_EQUALS":
+                return rule.amount >= amount;
+        }
+    }
+
+    /**
+     * @param {AccountRule} rule
+     * @param {EventObject} event
+     * @returns {boolean}
+     */
+    private checkAccountTypeRule(rule: AccountRule, event: EventObject): boolean {
+        if (event.item.monetary_account_id !== rule.accountId) {
+            return false;
+        }
+
+        if (rule.paymentType === "ALL") {
+            return true;
+        }
+
+        // let amount: number = 0;
+        switch (event.type) {
+            case "Payment":
+                if (rule.paymentType === "SENDS") {
+                    // send type and amount is negative
+                    return event.item.amount.value < 0;
+                } else if (rule.paymentType === "RECEIVES") {
+                    // receive type and amount is positive
+                    return event.item.amount.value > 0;
+                }
+                return false;
+            case "MasterCardAction":
+                if (rule.paymentType === "SENDS") {
+                    return true;
+                }
+                return false;
+            case "BunqMeTab":
+            case "RequestInquiry":
+            case "RequestResponse":
+                return false;
+        }
+    }
+
+    /**
+     * Checks if the given matchType for the rule matches the event type
+     * @param {Rule} rule
+     * @param {EventObject} event
+     * @returns {boolean}
+     */
+    private checkItemTypeRule(rule: TypeRule, event: EventObject): boolean {
+        // simply check if the event type matches the requried rule type
+        switch (rule.matchType) {
+            case "PAYMENT":
+                return event.type === "Payment" || event.type === "MasterCardAction";
+            case "PAYMENT_RECEIVED":
+                // not a payment so false
+                if (event.type !== "Payment") return false;
+
+                return event.item.amount.value > 0;
+            case "PAYMENT_SENT":
+                // all mastercardactions are outgoing payments
+                if (event.type === "MasterCardAction") return true;
+                // not mastercard or payment so false
+                if (event.type !== "Payment") return false;
+
+                return event.item.amount.value < 0;
+            case "REGULAR_PAYMENT":
+                return event.type === "Payment";
+            case "MASTERCARD_PAYMENT":
+                return event.type === "MasterCardAction";
+            case "REQUEST":
+                return event.type === "RequestResponse" || event.type === "RequestInquiry";
+            case "REQUEST_INQUIRY":
+                return event.type === "RequestInquiry";
+            case "REQUEST_RESPONSE":
+                return event.type === "RequestResponse";
+            case "BUNQ_ME_TAB":
+                return event.type === "BunqMeTab";
+        }
+    }
+
+    /**
+     * Return JSON stringified versio nof this object
+     * @returns {string}
+     */
+    public toString(): string {
+        return JSON.stringify({
+            id: this.getId(),
+            rules: this.getRules(),
+            title: this.getTitle(),
+            enabled: this.isEnabled(),
+            matchType: this.getMatchType(),
+            categories: this.getCategories()
+        });
+    }
+
+    /**
+     * Turn JSON string into a valid RuleCollection
+     * @param {string} jsonString
+     * @returns {RuleCollection}
+     */
+    public fromJSON(jsonString: string): RuleCollection {
+        const plainObject = JSON.parse(jsonString);
+        return this.fromObject(plainObject);
+    }
+
+    /**
+     * Turn a plain object into a valid RuleCollection
+     * @param object
+     * @returns {RuleCollection}
+     */
+    public fromObject(object: any): RuleCollection {
+        this.setCategories(object.categories);
+        this.setMatchType(object.matchType);
+        this.setEnabled(object.enabled);
+        this.setRules(object.rules);
+        this.setTitle(object.title);
+        this.setId(object.id);
+
+        return this;
+    }
+
+    /**
+     * Validate a plain ruleCollection object
+     * @param ruleCollection
+     * @returns {ValidationResult | true}
+     */
+    public static validateRuleCollection(ruleCollection: any): ValidationResult | true {
+        // basic type checks
+        if (typeof ruleCollection.categories !== "object")
+            return {
+                valid: false,
+                message: "Invalid 'categories'"
+            };
+        if (typeof ruleCollection.matchType !== "string")
+            return {
+                valid: false,
+                message: "Invalid 'matchType'"
+            };
+        if (typeof ruleCollection.enabled !== "boolean")
+            return {
+                valid: false,
+                message: "Invalid 'enabled' value"
+            };
+        if (typeof ruleCollection.rules !== "object")
+            return {
+                valid: false,
+                message: "Invalid 'rules'"
+            };
+        if (typeof ruleCollection.title !== "string")
+            return {
+                valid: false,
+                message: "Invalid 'title'"
+            };
+
+        // validate categories and rules are arrays
+        if (ruleCollection.categories instanceof Array === false)
+            return {
+                valid: false,
+                message: "Invalid 'categories'"
+            };
+        if (ruleCollection.rules instanceof Array === false)
+            return {
+                valid: false,
+                message: "Invalid 'rules'"
+            };
+
+        // validate that all given categories are strings
+        const allCategoriesAreStrings = ruleCollection.categories.every(categoryId => typeof categoryId === "string");
+        if (allCategoriesAreStrings === false)
+            return {
+                valid: false,
+                message: "One or more given categories are invalid"
+            };
+
+        // validate that all given rules are valid rules
+        const allRulesAreValid = ruleCollection.rules.every(rule => this.validateRule(rule) === true);
+        if (allRulesAreValid === false)
+            return {
+                valid: false,
+                message: "One or more given rules are invalid"
+            };
+
+        return true;
+    }
+
+    /**
+     * Validate a plain rule object
+     * @param rule
+     * @returns {ValidationResult | true}
+     */
+    public static validateRule(rule: any): ValidationResult | true {
+        if (typeof rule !== "object")
+            return {
+                valid: false,
+                message: "Rule isn't a valid object"
+            };
+        if (typeof rule.ruleType !== "string")
+            return {
+                valid: false,
+                message: "Rule contained invalid 'ruleType'"
+            };
+
+        return true;
+    }
+}
diff --git a/src/pages/AccountInfo.tsx b/src/pages/AccountInfo.tsx
index 5912a568..0d5b889d 100644
--- a/src/pages/AccountInfo.tsx
+++ b/src/pages/AccountInfo.tsx
@@ -86,7 +86,7 @@ const styles = {
     }
 };
 
-const PersonChip = ({ alias, BunqJSClient, ...otherProps }) => {
+const PersonChip = ({ alias, ...otherProps }) => {
     return (
         <Chip
             style={styles.chip}
@@ -94,7 +94,6 @@ const PersonChip = ({ alias, BunqJSClient, ...otherProps }) => {
                 <Avatar>
                     <LazyAttachmentImage
                         style={styles.chipImage}
-                        BunqJSClient={BunqJSClient}
                         height={32}
                         imageUUID={alias.avatar.image[0].attachment_public_uuid}
                     />
@@ -333,7 +332,7 @@ class AccountInfo extends React.Component<any> {
                         return coOwner.alias.uuid !== user.avatar.anchor_uuid;
                     })
                     .map(coOwner => {
-                        return <PersonChip BunqJSClient={this.props.BunqJSClient} alias={coOwner.alias} />;
+                        return <PersonChip alias={coOwner.alias} />;
                     });
             } else {
                 if (filteredInviteResponses.length > 0) {
@@ -346,7 +345,6 @@ class AccountInfo extends React.Component<any> {
                             return null;
                         return (
                             <PersonChip
-                                BunqJSClient={this.props.BunqJSClient}
                                 alias={filteredInviteResponse.ShareInviteMonetaryAccountResponse.counter_alias}
                                 onDelete={e => {
                                     this.props.shareInviteMonetaryAccountResponseChangeStatus(
@@ -365,7 +363,6 @@ class AccountInfo extends React.Component<any> {
                     profileIconList = filteredShareInquiries.map(filteredShareInquiry => {
                         return (
                             <PersonChip
-                                BunqJSClient={this.props.BunqJSClient}
                                 alias={filteredShareInquiry.ShareInviteMonetaryAccountInquiry.counter_user_alias}
                                 onDelete={e => {
                                     this.props.shareInviteMonetaryAccountInquiryChangeStatus(
@@ -527,7 +524,6 @@ class AccountInfo extends React.Component<any> {
 
                     <AccountCard
                         key="account-card"
-                        BunqJSClient={this.props.BunqJSClient}
                         openSnackbar={this.props.openSnackbar}
                         hideBalance={this.props.hideBalance}
                         {...accountCardProps}
@@ -537,7 +533,6 @@ class AccountInfo extends React.Component<any> {
 
                     <Paper key="combinedlist-paper" style={styles.paperList}>
                         <CombinedList
-                            BunqJSClient={this.props.BunqJSClient}
                             hiddenTypes={["ShareInviteMonetaryAccountInquiry"]}
                             accountId={accountId}
                             displayRequestPayments={false}
@@ -599,21 +594,19 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
 
-        accountsUpdate: userId => dispatch(accountsUpdate(BunqJSClient, userId)),
+        accountsUpdate: userId => dispatch(accountsUpdate(userId)),
         deactivateAccount: (userId, accountId, reason, accountType) =>
-            dispatch(accountsDeactivate(BunqJSClient, userId, accountId, reason, accountType)),
+            dispatch(accountsDeactivate(userId, accountId, reason, accountType)),
         updateSettings: (userId, accountId, settings, accountType) =>
-            dispatch(accountsUpdateSettings(BunqJSClient, userId, accountId, settings, accountType)),
+            dispatch(accountsUpdateSettings(userId, accountId, settings, accountType)),
 
         shareInviteMonetaryAccountResponseChangeStatus: (userId, shareInviteMonetaryAccountResponseId, status) =>
             dispatch(
                 shareInviteMonetaryAccountResponseChangeStatus(
-                    BunqJSClient,
                     userId,
                     shareInviteMonetaryAccountResponseId,
                     status
@@ -627,7 +620,6 @@ const mapDispatchToProps = (dispatch, ownProps) => {
         ) =>
             dispatch(
                 shareInviteMonetaryAccountInquiryChangeStatus(
-                    BunqJSClient,
                     userId,
                     accountId,
                     shareInviteMonetaryAccountInquiryId,
@@ -636,19 +628,19 @@ const mapDispatchToProps = (dispatch, ownProps) => {
             ),
 
         shareInviteMonetaryAccountInquiriesInfoUpdate: (userId, accountId) =>
-            dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(BunqJSClient, userId, accountId)),
+            dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(userId, accountId)),
         shareInviteMonetaryAccountResponsesInfoUpdate: (userId, accountId) =>
-            dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(BunqJSClient, userId)),
-        paymentsUpdate: (userId, accountId) => dispatch(paymentInfoUpdate(BunqJSClient, userId, accountId)),
+            dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(userId)),
+        paymentsUpdate: (userId, accountId) => dispatch(paymentInfoUpdate(userId, accountId)),
         requestInquiriesUpdate: (userId, accountId) =>
-            dispatch(requestInquiriesUpdate(BunqJSClient, userId, accountId)),
+            dispatch(requestInquiriesUpdate(userId, accountId)),
         requestInquiryBatchesUpdate: (userId, accountId) =>
-            dispatch(requestInquiryBatchesUpdate(BunqJSClient, userId, accountId)),
+            dispatch(requestInquiryBatchesUpdate(userId, accountId)),
         requestResponsesUpdate: (userId, accountId) =>
-            dispatch(requestResponsesUpdate(BunqJSClient, userId, accountId)),
+            dispatch(requestResponsesUpdate(userId, accountId)),
         masterCardActionsUpdate: (userId, accountId) =>
-            dispatch(masterCardActionsUpdate(BunqJSClient, userId, accountId)),
-        bunqMeTabsUpdate: (userId, accountId) => dispatch(bunqMeTabsUpdate(BunqJSClient, userId, accountId))
+            dispatch(masterCardActionsUpdate(userId, accountId)),
+        bunqMeTabsUpdate: (userId, accountId) => dispatch(bunqMeTabsUpdate(userId, accountId))
     };
 };
 
diff --git a/src/pages/AddAccount.tsx b/src/pages/AddAccount.tsx
index fac0f10f..86ff7c0c 100644
--- a/src/pages/AddAccount.tsx
+++ b/src/pages/AddAccount.tsx
@@ -263,7 +263,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     return {
         createAccount: (userId, currency, description, dailyLimit, color, savingsGoal, accountType) =>
             dispatch(
-                createAccount(BunqJSClient, userId, currency, description, dailyLimit, color, savingsGoal, accountType)
+                createAccount(userId, currency, description, dailyLimit, color, savingsGoal, accountType)
             ),
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
     };
diff --git a/src/pages/BunqMeTab/BunqMeTab.tsx b/src/pages/BunqMeTab/BunqMeTab.tsx
index a895bbc8..9ca53014 100644
--- a/src/pages/BunqMeTab/BunqMeTab.tsx
+++ b/src/pages/BunqMeTab/BunqMeTab.tsx
@@ -58,19 +58,18 @@ class BunqMeTab extends React.Component<any> {
 
                 <Grid item xs={12} md={4} lg={3}>
                     <Paper style={styles.paper}>
-                        <AccountList BunqJSClient={this.props.BunqJSClient} updateExternal={this.updateTabs} />
+                        <AccountList updateExternal={this.updateTabs} />
                     </Paper>
                 </Grid>
 
                 <Grid item xs={12} md={8} lg={6}>
                     <Collapse in={this.state.showForm} unmountOnExit>
                         <Paper style={styles.paper}>
-                            <BunqMeTabForm BunqJSClient={this.props.BunqJSClient} />
+                            <BunqMeTabForm />
                         </Paper>
                     </Collapse>
                     <Paper style={styles.paper}>
                         <BunqMeTabList
-                            BunqJSClient={this.props.BunqJSClient}
                             t={t}
                             secondaryActions={
                                 this.props.limitedPermissions ? null : (
@@ -101,7 +100,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, props) => {
     const { BunqJSClient } = props;
     return {
-        bunqMeTabsUpdate: (userId, accountId) => dispatch(bunqMeTabsUpdate(BunqJSClient, userId, accountId))
+        bunqMeTabsUpdate: (userId, accountId) => dispatch(bunqMeTabsUpdate(userId, accountId))
     };
 };
 
diff --git a/src/pages/BunqMeTab/BunqMeTabForm.tsx b/src/pages/BunqMeTab/BunqMeTabForm.tsx
index 3d946627..3b5f59fc 100644
--- a/src/pages/BunqMeTab/BunqMeTabForm.tsx
+++ b/src/pages/BunqMeTab/BunqMeTabForm.tsx
@@ -169,7 +169,6 @@ class BunqMeTabForm extends React.Component<any> {
                     value={this.state.selectedAccount}
                     onChange={this.handleChange("selectedAccount")}
                     accounts={this.props.accounts}
-                    BunqJSClient={this.props.BunqJSClient}
                 />
 
                 <TextField
@@ -230,7 +229,7 @@ const mapDispatchToProps = (dispatch, props) => {
     const { BunqJSClient } = props;
     return {
         bunqMeTabSend: (userId, accountId, description, amount, options) =>
-            dispatch(bunqMeTabSend(BunqJSClient, userId, accountId, description, amount, options)),
+            dispatch(bunqMeTabSend(userId, accountId, description, amount, options)),
         openSnackbar: message => dispatch(snackbarActions.open({ message }))
     };
 };
diff --git a/src/pages/Cards/Cards.tsx b/src/pages/Cards/Cards.tsx
index 06f10d15..4c39e908 100644
--- a/src/pages/Cards/Cards.tsx
+++ b/src/pages/Cards/Cards.tsx
@@ -258,7 +258,6 @@ class Cards extends React.Component<any> {
             // then generate the items seperately
             cardItems = filteredCards.map((card, index) => (
                 <CardListItem
-                    BunqJSClient={this.props.BunqJSClient}
                     card={card}
                     onClick={this.handleCardClick.bind(this, index)}
                 />
@@ -328,7 +327,6 @@ class Cards extends React.Component<any> {
                     value={secondaryAccountIndex}
                     onChange={this.handleAccountChange("SECONDARY")}
                     accounts={this.props.accounts}
-                    BunqJSClient={this.props.BunqJSClient}
                     hiddenConnectTypes={["draftOnly", "showOnly"]}
                 />
             </>
@@ -391,7 +389,6 @@ class Cards extends React.Component<any> {
                                         value={primaryAccountIndex}
                                         onChange={this.handleAccountChange("PRIMARY")}
                                         accounts={this.props.accounts}
-                                        BunqJSClient={this.props.BunqJSClient}
                                         hiddenConnectTypes={["draftOnly", "showOnly"]}
                                     />
 
diff --git a/src/pages/Connect/Connect.tsx b/src/pages/Connect/Connect.tsx
index ebe44f7e..c1592e00 100644
--- a/src/pages/Connect/Connect.tsx
+++ b/src/pages/Connect/Connect.tsx
@@ -569,7 +569,6 @@ class Connect extends React.Component<any> {
                                                     connectInfo={
                                                         filteredInviteInquiry.ShareInviteMonetaryAccountInquiry
                                                     }
-                                                    BunqJSClient={this.props.BunqJSClient}
                                                 />
                                             ))}
                                         </List>
@@ -589,7 +588,6 @@ class Connect extends React.Component<any> {
                                                     connectInfo={
                                                         filteredInviteResponse.ShareInviteMonetaryAccountResponse
                                                     }
-                                                    BunqJSClient={this.props.BunqJSClient}
                                                 />
                                             ))}
                                         </List>
@@ -631,12 +629,12 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
 
-        accountsUpdate: userId => dispatch(accountsUpdate(BunqJSClient, userId)),
+        accountsUpdate: userId => dispatch(accountsUpdate(userId)),
 
         shareInviteMonetaryAccountInquiriesInfoUpdate: (userId, accountId) =>
-            dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(BunqJSClient, userId, accountId)),
+            dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(userId, accountId)),
         shareInviteMonetaryAccountResponsesInfoUpdate: (userId, accountId) =>
-            dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(BunqJSClient, userId)),
+            dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(userId)),
 
         shareInviteMonetaryAccountInquirySend: (
             userId,
@@ -648,7 +646,6 @@ const mapDispatchToProps = (dispatch, ownProps) => {
         ) =>
             dispatch(
                 shareInviteMonetaryAccountInquirySend(
-                    BunqJSClient,
                     userId,
                     accountId,
                     counterparty,
diff --git a/src/pages/Connect/ConnectListItem.tsx b/src/pages/Connect/ConnectListItem.tsx
index 30f48a75..b898f25e 100644
--- a/src/pages/Connect/ConnectListItem.tsx
+++ b/src/pages/Connect/ConnectListItem.tsx
@@ -58,7 +58,7 @@ class ConnectListItem extends React.Component {
     };
 
     render() {
-        const { t, BunqJSClient, connectInfo } = this.props;
+        const { t, connectInfo } = this.props;
 
         const yesText = t("Yes");
         const noText = t("No");
@@ -178,7 +178,7 @@ class ConnectListItem extends React.Component {
             <>
                 <ListItem button onClick={this.toggleOpen}>
                     <Avatar style={styles.smallAvatar}>
-                        <LazyAttachmentImage height={50} BunqJSClient={BunqJSClient} imageUUID={imageUUID} />
+                        <LazyAttachmentImage height={50} imageUUID={imageUUID} />
                     </Avatar>
                     <ListItemText
                         primary={counterAliasInfo.display_name}
@@ -208,7 +208,6 @@ const mapDispatchToProps = (dispatch, ownProps) => {
         ) =>
             dispatch(
                 shareInviteMonetaryAccountInquiryChangeStatus(
-                    BunqJSClient,
                     userId,
                     accountId,
                     shareInviteMonetaryAccountInquiryId,
@@ -218,7 +217,6 @@ const mapDispatchToProps = (dispatch, ownProps) => {
         shareInviteMonetaryAccountResponseChangeStatus: (userId, shareInviteMonetaryAccountResponseId, status) =>
             dispatch(
                 shareInviteMonetaryAccountResponseChangeStatus(
-                    BunqJSClient,
                     userId,
                     shareInviteMonetaryAccountResponseId,
                     status
diff --git a/src/pages/Contacts/Contacts.tsx b/src/pages/Contacts/Contacts.tsx
index 2af2e044..582204f2 100644
--- a/src/pages/Contacts/Contacts.tsx
+++ b/src/pages/Contacts/Contacts.tsx
@@ -202,11 +202,11 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, props) => {
     const { BunqJSClient } = props;
     return {
-        contactInfoUpdateGoogle: accessToken => dispatch(contactInfoUpdateGoogle(BunqJSClient, accessToken)),
-        contactInfoUpdateApple: filePaths => dispatch(contactInfoUpdateApple(BunqJSClient, filePaths)),
-        contactInfoUpdateOffice365: accessToken => dispatch(contactInfoUpdateOffice365(BunqJSClient, accessToken)),
+        contactInfoUpdateGoogle: accessToken => dispatch(contactInfoUpdateGoogle(accessToken)),
+        contactInfoUpdateApple: filePaths => dispatch(contactInfoUpdateApple(filePaths)),
+        contactInfoUpdateOffice365: accessToken => dispatch(contactInfoUpdateOffice365(accessToken)),
         contactsSetInfoType: (contacts, type) => dispatch(contactsActions.setInfoType({ contacts, type })),
-        clearContacts: (type = false) => dispatch(contactsActions.clear({ BunqJSClient, type })),
+        clearContacts: (type = false) => dispatch(contactsActions.clear({ type })),
         openSnackbar: message => dispatch(snackbarActions.open({ message }))
     };
 };
diff --git a/src/pages/Dashboard/AddMoneyButton.tsx b/src/pages/Dashboard/AddMoneyButton.tsx
index 37224d4c..5d8e53dd 100644
--- a/src/pages/Dashboard/AddMoneyButton.tsx
+++ b/src/pages/Dashboard/AddMoneyButton.tsx
@@ -73,7 +73,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
         requestInquirySend: (userId, accountId, requestInquiries) =>
-            dispatch(requestInquirySend(BunqJSClient, userId, accountId, requestInquiries))
+            dispatch(requestInquirySend(userId, accountId, requestInquiries))
     };
 };
 export default connect(mapStateToProps, mapDispatchToProps)(translate("translations")(AddMoneyButton));
diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index 2ac1741c..f7a72780 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -83,7 +83,6 @@ class Dashboard extends React.Component {
             <Avatar style={styles.bigAvatar}>
                 <AttachmentImage
                     height={50}
-                    BunqJSClient={this.props.BunqJSClient}
                     imageUUID={user.avatar.image[0].attachment_public_uuid}
                 />
             </Avatar>
@@ -172,7 +171,7 @@ class Dashboard extends React.Component {
                         </Grid>
 
                         <Grid item xs={6} style={styles.headerButtonWrapper}>
-                            <SwitchKeysMenu history={this.props.history} BunqJSClient={this.props.BunqJSClient} />
+                            <SwitchKeysMenu history={this.props.history} />
 
                             <Tooltip id="tooltip-fab" title={t("Logout")}>
                                 <IconButton
@@ -196,9 +195,9 @@ class Dashboard extends React.Component {
 
                                 {(selectedTab === "accounts" || tabsEnabled === false) && (
                                     <Paper>
-                                        <AccountList BunqJSClient={this.props.BunqJSClient} />
+                                        <AccountList />
 
-                                        <AddMoneyButton user={this.props.user} BunqJSClient={this.props.BunqJSClient} />
+                                        <AddMoneyButton user={this.props.user} />
                                     </Paper>
                                 )}
 
@@ -232,7 +231,6 @@ class Dashboard extends React.Component {
                         <Grid item xs={12} sm={7} md={8}>
                             <Paper>
                                 <CombinedList
-                                    BunqJSClient={this.props.BunqJSClient}
                                     displayRequestPayments={false}
                                     displayAcceptedRequests={true}
                                 />
diff --git a/src/pages/Exports.tsx b/src/pages/Exports.tsx
index d038b87c..34070843 100644
--- a/src/pages/Exports.tsx
+++ b/src/pages/Exports.tsx
@@ -389,7 +389,7 @@ class Exports extends React.Component<any> {
 
                 <Grid item xs={12} md={4}>
                     <Paper>
-                        <AccountList updateExternal={this.updateExports} BunqJSClient={this.props.BunqJSClient} />
+                        <AccountList updateExternal={this.updateExports} />
                     </Paper>
                 </Grid>
 
@@ -571,7 +571,6 @@ class Exports extends React.Component<any> {
 
                             <Paper>
                                 <CombinedList
-                                    BunqJSClient={this.props.BunqJSClient}
                                     hiddenTypes={[
                                         "BunqMeTab",
                                         "RequestInquiry",
@@ -621,8 +620,8 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
-        exportInfoUpdate: (userId, accountId) => dispatch(exportInfoUpdate(BunqJSClient, userId, accountId)),
-        exportNew: (...params) => dispatch(exportNew(BunqJSClient, ...params))
+        exportInfoUpdate: (userId, accountId) => dispatch(exportInfoUpdate(userId, accountId)),
+        exportNew: (...params) => dispatch(exportNew(...params))
     };
 };
 
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index d5c99a99..a02c76b9 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -419,7 +419,6 @@ class Login extends React.Component {
 
                     {this.state.tabIndex === 1 && (
                         <OAuthManagement
-                            BunqJSClient={BunqJSClient}
                             setApiKeyState={this.setApiKeyState}
                             toggleOptionVisibility={this.toggleOptionVisibility}
                             sandboxMode={this.state.sandboxMode}
@@ -484,7 +483,6 @@ class Login extends React.Component {
 
                 <SideOptions
                     t={t}
-                    BunqJSClient={BunqJSClient}
                     buttonDisabled={buttonDisabled}
                     sandboxButtonDisabled={sandboxButtonDisabled}
                     setApiKeyClassname={setApiKeyClassname}
diff --git a/src/pages/MasterCardActionInfo.tsx b/src/pages/MasterCardActionInfo.tsx
index 49b4f690..8db00bd7 100644
--- a/src/pages/MasterCardActionInfo.tsx
+++ b/src/pages/MasterCardActionInfo.tsx
@@ -157,12 +157,11 @@ class MasterCardActionInfo extends React.Component<any> {
                 );
             }
 
-            noteTextsForm = <NoteTextForm BunqJSClient={this.props.BunqJSClient} event={masterCardAction} />;
+            noteTextsForm = <NoteTextForm event={masterCardAction} />;
 
             content = (
                 <Grid container spacing={24} align={"center"} justify={"center"}>
                     <TransactionHeader
-                        BunqJSClient={this.props.BunqJSClient}
                         to={masterCardAction.counterparty_alias}
                         from={masterCardAction.alias}
                         user={this.props.user}
@@ -334,7 +333,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
         applicationSetPDFMode: enabled => dispatch(applicationActions.setPdfMode(enabled)),
 
         masterCardActionInfoUpdate: (user_id, account_id, master_card_action_id) =>
-            dispatch(masterCardActionInfoUpdate(BunqJSClient, user_id, account_id, master_card_action_id))
+            dispatch(masterCardActionInfoUpdate(user_id, account_id, master_card_action_id))
     };
 };
 
diff --git a/src/pages/Pay/Pay.tsx b/src/pages/Pay/Pay.tsx
index 57b8a337..113c2f92 100644
--- a/src/pages/Pay/Pay.tsx
+++ b/src/pages/Pay/Pay.tsx
@@ -718,7 +718,6 @@ class Pay extends React.Component<any> {
                                         value={this.state.selectedAccount}
                                         onChange={this.handleChangeDirect("selectedAccount")}
                                         accounts={this.props.accounts}
-                                        BunqJSClient={this.props.BunqJSClient}
                                         hiddenConnectTypes={["showOnly"]}
                                     />
                                     {this.state.insufficientFundsCondition !== false ? (
@@ -887,15 +886,15 @@ const mapDispatchToProps = (dispatch, props) => {
     const { BunqJSClient } = props;
     return {
         paySend: (userId, accountId, description, amount, targets, draft = false) =>
-            dispatch(paySend(BunqJSClient, userId, accountId, description, amount, targets, draft)),
+            dispatch(paySend(userId, accountId, description, amount, targets, draft)),
         paySchedule: (userId, accountId, description, amount, targets, schedule) =>
-            dispatch(paySchedule(BunqJSClient, userId, accountId, description, amount, targets, schedule)),
+            dispatch(paySchedule(userId, accountId, description, amount, targets, schedule)),
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
 
-        paymentInfoUpdate: (userId, accountId) => dispatch(paymentInfoUpdate(BunqJSClient, userId, accountId)),
+        paymentInfoUpdate: (userId, accountId) => dispatch(paymentInfoUpdate(userId, accountId)),
 
         pendingPaymentsAddPayment: (accountId, pendingPayment) =>
-            dispatch(pendingPaymentsAddPayment(BunqJSClient, accountId, pendingPayment))
+            dispatch(pendingPaymentsAddPayment(accountId, pendingPayment))
     };
 };
 
diff --git a/src/pages/PaymentInfo.tsx b/src/pages/PaymentInfo.tsx
index c0454660..2c0b2c88 100644
--- a/src/pages/PaymentInfo.tsx
+++ b/src/pages/PaymentInfo.tsx
@@ -156,10 +156,9 @@ class PaymentInfo extends React.Component<any> {
                 );
             }
 
-            noteTextsForm = <NoteTextForm BunqJSClient={this.props.BunqJSClient} event={payment} />;
+            noteTextsForm = <NoteTextForm event={payment} />;
 
             const transactionHeaderProps = {
-                BunqJSClient: this.props.BunqJSClient,
                 to: payment.counterparty_alias,
                 from: payment.alias,
                 user: this.props.user,
@@ -329,7 +328,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
         applicationSetPDFMode: enabled => dispatch(applicationActions.setPdfMode(enabled)),
 
         updatePayment: (user_id, account_id, payment_id) =>
-            dispatch(paymentsUpdate(BunqJSClient, user_id, account_id, payment_id)),
+            dispatch(paymentsUpdate(user_id, account_id, payment_id)),
 
         setTheme: theme => dispatch(setTheme(theme))
     };
diff --git a/src/pages/PendingPayments/PendingPayments.tsx b/src/pages/PendingPayments/PendingPayments.tsx
index 5a8d7060..56750383 100644
--- a/src/pages/PendingPayments/PendingPayments.tsx
+++ b/src/pages/PendingPayments/PendingPayments.tsx
@@ -249,7 +249,7 @@ class PendingPayments extends React.Component<any> {
     decrementPromiseCounter = () => this.setState({ paymentPromiseCount: this.state.paymentPromiseCount - 1 });
 
     paySelected = () => {
-        const { t, BunqJSClient, user } = this.props;
+        const { t, user } = this.props;
         const failedText = t("Failed to complete some of the selected payments");
 
         this.confirmAction("Are you sure you wish to complete these payments?", () => {
@@ -274,7 +274,7 @@ class PendingPayments extends React.Component<any> {
         });
     };
     draftSelected = () => {
-        const { t, BunqJSClient, user } = this.props;
+        const { t, user } = this.props;
         const failedText = t("Failed to draft some of the selected payments");
 
         this.confirmAction("Are you sure you wish to draft these payments?", () => {
@@ -300,7 +300,7 @@ class PendingPayments extends React.Component<any> {
     };
 
     render() {
-        const { t, BunqJSClient, accounts, pendingPayments } = this.props;
+        const { t, accounts, pendingPayments } = this.props;
 
         let groupedPayments = {};
         Object.keys(pendingPayments).forEach(pendingPaymentId => {
@@ -359,7 +359,6 @@ class PendingPayments extends React.Component<any> {
                                     <Avatar style={styles.avatar}>
                                         <LazyAttachmentImage
                                             height={40}
-                                            BunqJSClient={BunqJSClient}
                                             imageUUID={imageUUID}
                                         />
                                     </Avatar>
@@ -486,9 +485,9 @@ const mapDispatchToProps = (dispatch, ownProps) => {
         BunqErrorHandler: (error, message) => BunqErrorHandler(dispatch, error, message, BunqJSClient),
 
         pendingPaymentsClear: () => dispatch(pendingPaymentsClear()),
-        pendingPaymentsClearAccount: accountId => dispatch(pendingPaymentsClearAccount(BunqJSClient, accountId)),
+        pendingPaymentsClearAccount: accountId => dispatch(pendingPaymentsClearAccount(accountId)),
         pendingPaymentsRemovePayment: pendingPaymentId =>
-            dispatch(pendingPaymentsRemovePayment(BunqJSClient, pendingPaymentId))
+            dispatch(pendingPaymentsRemovePayment(pendingPaymentId))
     };
 };
 
diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
index 5fc4ba66..2c6a08d6 100644
--- a/src/pages/Profile/Profile.tsx
+++ b/src/pages/Profile/Profile.tsx
@@ -202,7 +202,6 @@ class Profile extends React.Component<any> {
             content = (
                 <>
                     <UploadFullscreen
-                        BunqJSClient={this.props.BunqJSClient}
                         open={this.state.displayUploadScreen}
                         onComplete={this.handleFileUpload}
                         onClose={this.toggleFileUploadDialog}
@@ -220,7 +219,6 @@ class Profile extends React.Component<any> {
                                     }
                                 >
                                     <LazyAttachmentImage
-                                        BunqJSClient={this.props.BunqJSClient}
                                         height={70}
                                         imageUUID={user.avatar.image[0].attachment_public_uuid}
                                     />
@@ -257,7 +255,6 @@ class Profile extends React.Component<any> {
                     <BillingInfo
                         t={t}
                         user={user}
-                        BunqJSClient={this.props.BunqJSClient}
                         BunqErrorHandler={this.props.BunqErrorHandler}
                     />
 
@@ -266,7 +263,6 @@ class Profile extends React.Component<any> {
                         user={user}
                         userType={userType}
                         usersUpdate={this.props.usersUpdate}
-                        BunqJSClient={this.props.BunqJSClient}
                         BunqErrorHandler={this.props.BunqErrorHandler}
                     />
                 </>
@@ -319,8 +315,8 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
-        usersUpdate: updated => dispatch(usersUpdate(BunqJSClient, updated)),
-        userUpdateImage: (userId, attachmentId) => dispatch(userUpdateImage(BunqJSClient, userId, attachmentId)),
+        usersUpdate: updated => dispatch(usersUpdate(updated)),
+        userUpdateImage: (userId, attachmentId) => dispatch(userUpdateImage(userId, attachmentId)),
 
         BunqErrorHandler: (error, message) => BunqErrorHandler(dispatch, error, message)
     };
diff --git a/src/pages/RequestInquiry/RequestInquiry.tsx b/src/pages/RequestInquiry/RequestInquiry.tsx
index 470656c8..0df7d3c1 100644
--- a/src/pages/RequestInquiry/RequestInquiry.tsx
+++ b/src/pages/RequestInquiry/RequestInquiry.tsx
@@ -545,7 +545,6 @@ class RequestInquiry extends React.Component<any> {
                             value={this.state.selectedAccount}
                             onChange={this.handleChange("selectedAccount")}
                             accounts={this.props.accounts}
-                            BunqJSClient={this.props.BunqJSClient}
                             hiddenConnectTypes={["draftOnly", "showOnly"]}
                         />
 
@@ -590,7 +589,6 @@ class RequestInquiry extends React.Component<any> {
 
                     <SplitAmountForm
                         t={t}
-                        BunqJSClient={this.props.BunqJSClient}
                         account={account}
                         targets={this.state.targets}
                         amount={this.state.amount}
@@ -657,9 +655,9 @@ const mapDispatchToProps = (dispatch, props) => {
     const { BunqJSClient } = props;
     return {
         requestInquirySend: (userId, accountId, requestInquiries) =>
-            dispatch(requestInquirySend(BunqJSClient, userId, accountId, requestInquiries)),
+            dispatch(requestInquirySend(userId, accountId, requestInquiries)),
 
-        requestInquiryUpdate: (userId, accountId) => dispatch(requestInquiriesUpdate(BunqJSClient, userId, accountId)),
+        requestInquiryUpdate: (userId, accountId) => dispatch(requestInquiriesUpdate(userId, accountId)),
 
         openSnackbar: message => dispatch(snackbarActions.open({ message }))
     };
diff --git a/src/pages/RequestInquiry/SplitAmountForm.tsx b/src/pages/RequestInquiry/SplitAmountForm.tsx
index 96b58854..be7bfc13 100644
--- a/src/pages/RequestInquiry/SplitAmountForm.tsx
+++ b/src/pages/RequestInquiry/SplitAmountForm.tsx
@@ -30,7 +30,7 @@ class SplitAmountForm extends React.Component {
     }
 
     render() {
-        const { BunqJSClient, account, targets, splitAmounts, splitRequest, toggleSplitRequest, amount } = this.props;
+        const { account, targets, splitAmounts, splitRequest, toggleSplitRequest, amount } = this.props;
 
         if (targets.length === 0) return null;
         if (!amount) return null;
@@ -63,7 +63,6 @@ class SplitAmountForm extends React.Component {
                             <Table style={styles.table}>
                                 <TableBody>
                                     <SplitAmountItem
-                                        BunqJSClient={BunqJSClient}
                                         account={account}
                                         amount={amount}
                                         totalSplit={totalSplit}
diff --git a/src/pages/RequestInquiry/SplitAmountItem.tsx b/src/pages/RequestInquiry/SplitAmountItem.tsx
index fc7297a3..8602cfda 100644
--- a/src/pages/RequestInquiry/SplitAmountItem.tsx
+++ b/src/pages/RequestInquiry/SplitAmountItem.tsx
@@ -75,13 +75,13 @@ class SplitAmountItem extends React.Component {
     };
 
     render() {
-        const { BunqJSClient, account, target, splitAmount, totalSplit, amount } = this.props;
+        const { account, target, splitAmount, totalSplit, amount } = this.props;
 
         const splitAmountValue = typeof splitAmount !== "undefined" ? splitAmount : 1;
 
         let targetInfo = null;
         if (account) {
-            targetInfo = <AccountListItemChip BunqJSClient={BunqJSClient} account={account} />;
+            targetInfo = <AccountListItemChip account={account} />;
         } else {
             let Icon = null;
             switch (target.type) {
diff --git a/src/pages/RequestInquiryInfo.tsx b/src/pages/RequestInquiryInfo.tsx
index 6796fa2a..34b53b53 100644
--- a/src/pages/RequestInquiryInfo.tsx
+++ b/src/pages/RequestInquiryInfo.tsx
@@ -167,10 +167,9 @@ class RequestInquiryInfo extends React.Component<any> {
                 );
             }
 
-            noteTextsForm = <NoteTextForm BunqJSClient={this.props.BunqJSClient} event={requestInquiry} />;
+            noteTextsForm = <NoteTextForm event={requestInquiry} />;
 
             const transactionHeaderProps = {
-                BunqJSClient: this.props.BunqJSClient,
                 to: requestInquiry.counterparty_alias,
                 from: requestInquiry.user_alias_created,
                 onForwardColor: "secondary",
@@ -354,9 +353,9 @@ const mapDispatchToProps = (dispatch, ownProps) => {
         applicationSetPDFMode: enabled => dispatch(applicationActions.setPdfMode(enabled)),
 
         requestInquiryUpdate: (user_id, account_id, request_inquiry_id) =>
-            dispatch(requestInquiryUpdate(BunqJSClient, user_id, account_id, request_inquiry_id)),
+            dispatch(requestInquiryUpdate(user_id, account_id, request_inquiry_id)),
         requestInquiryCancel: (user_id, account_id, request_inquiry_id) =>
-            dispatch(requestInquiryCancel(BunqJSClient, user_id, account_id, request_inquiry_id))
+            dispatch(requestInquiryCancel(user_id, account_id, request_inquiry_id))
     };
 };
 
diff --git a/src/pages/RequestResponseInfo/RequestResponseInfo.tsx b/src/pages/RequestResponseInfo/RequestResponseInfo.tsx
index dfeca6ca..c0860748 100644
--- a/src/pages/RequestResponseInfo/RequestResponseInfo.tsx
+++ b/src/pages/RequestResponseInfo/RequestResponseInfo.tsx
@@ -206,14 +206,13 @@ class RequestResponseInfo extends React.Component<any> {
                 );
             }
 
-            noteTextsForm = <NoteTextForm BunqJSClient={this.props.BunqJSClient} event={requestResponse} />;
+            noteTextsForm = <NoteTextForm event={requestResponse} />;
 
             content = (
                 <>
                     <Paper style={styles.paper}>
                         <Grid container spacing={24} align={"center"} justify={"center"}>
                             <TransactionHeader
-                                BunqJSClient={this.props.BunqJSClient}
                                 to={requestResponse.alias}
                                 from={requestResponse.counterparty_alias}
                                 user={this.props.user}
@@ -353,7 +352,6 @@ class RequestResponseInfo extends React.Component<any> {
                                             value={this.state.selectedAccount}
                                             onChange={this.handleChangeDirect("selectedAccount")}
                                             accounts={accounts}
-                                            BunqJSClient={this.props.BunqJSClient}
                                             hiddenConnectTypes={["showOnly"]}
                                         />
                                     </Grid>
@@ -459,13 +457,13 @@ const mapDispatchToProps = (dispatch, ownProps) => {
         applicationSetPDFMode: enabled => dispatch(applicationActions.setPdfMode(enabled)),
 
         requestResponseUpdate: (user_id, account_id, request_response_id) =>
-            dispatch(requestResponseUpdate(BunqJSClient, user_id, account_id, request_response_id)),
+            dispatch(requestResponseUpdate(user_id, account_id, request_response_id)),
         requestResponseAccept: (user_id, account_id, request_response_id, amount_responded, options) =>
             dispatch(
-                requestResponseAccept(BunqJSClient, user_id, account_id, request_response_id, amount_responded, options)
+                requestResponseAccept(user_id, account_id, request_response_id, amount_responded, options)
             ),
         requestResponseReject: (user_id, account_id, request_response_id) =>
-            dispatch(requestResponseReject(BunqJSClient, user_id, account_id, request_response_id))
+            dispatch(requestResponseReject(user_id, account_id, request_response_id))
     };
 };
 
diff --git a/src/pages/RulePage/RuleCreator.tsx b/src/pages/RulePage/RuleCreator.tsx
index 759219f6..3bfd4b5c 100644
--- a/src/pages/RulePage/RuleCreator.tsx
+++ b/src/pages/RulePage/RuleCreator.tsx
@@ -339,7 +339,6 @@ class RuleCreator extends React.Component<any, any> {
                 case "ACCOUNT_TYPE":
                     return (
                         <AccountRuleItem
-                            BunqJSClient={this.props.BunqJSClient}
                             openExportDialog={this.openExportDialog}
                             removeRule={this.removeRule(ruleKey)}
                             updateRule={this.updateRule(ruleKey)}
diff --git a/src/pages/RulePage/RulePage.tsx b/src/pages/RulePage/RulePage.tsx
index 7ffe195c..41b69517 100644
--- a/src/pages/RulePage/RulePage.tsx
+++ b/src/pages/RulePage/RulePage.tsx
@@ -115,7 +115,6 @@ class RulesPage extends React.Component<any> {
                 <Grid item xs={12}>
                     <RuleCreator
                         t={t}
-                        BunqJSClient={this.props.BunqJSClient}
                         categories={this.props.categories}
                         accounts={this.props.accounts}
                         ruleCollection={ruleCollection}
diff --git a/src/pages/RulePage/RuleTypeItems/AccountRuleItem.tsx b/src/pages/RulePage/RuleTypeItems/AccountRuleItem.tsx
index beb58b6f..22b631d9 100644
--- a/src/pages/RulePage/RuleTypeItems/AccountRuleItem.tsx
+++ b/src/pages/RulePage/RuleTypeItems/AccountRuleItem.tsx
@@ -73,7 +73,6 @@ class AccountRuleItem extends React.Component<IPropTypes, any> {
                         value={accountIndex}
                         onChange={this.handleAccountChange}
                         accounts={this.props.accounts}
-                        BunqJSClient={this.props.BunqJSClient}
                     />
                 </TableCell>
 
diff --git a/src/pages/ScheduledPayments/ScheduledPaymentItem.tsx b/src/pages/ScheduledPayments/ScheduledPaymentItem.tsx
index e7749d62..ccc79464 100644
--- a/src/pages/ScheduledPayments/ScheduledPaymentItem.tsx
+++ b/src/pages/ScheduledPayments/ScheduledPaymentItem.tsx
@@ -35,7 +35,7 @@ class ScheduledPaymentItem extends React.Component {
     }
 
     render() {
-        const { scheduledPayment, BunqJSClient, key, t } = this.props;
+        const { scheduledPayment, key, t } = this.props;
         const nextPaymentTextTranslate = t("Next payment");
         const scheduleExpiredTranslate = t("Schedule expired");
 
@@ -71,7 +71,7 @@ class ScheduledPaymentItem extends React.Component {
             <>
                 <ListItem key={key} button onClick={this.props.selectScheduledPayment}>
                     <Avatar style={styles.smallAvatar}>
-                        <LazyAttachmentImage height={50} BunqJSClient={BunqJSClient} imageUUID={imageUUID} />
+                        <LazyAttachmentImage height={50} imageUUID={imageUUID} />
                     </Avatar>
 
                     <ListItemText primary={scheduleTextResult.primary} secondary={scheduleTextResult.secondary} />
diff --git a/src/pages/ScheduledPayments/ScheduledPayments.tsx b/src/pages/ScheduledPayments/ScheduledPayments.tsx
index 2742a366..cd795907 100644
--- a/src/pages/ScheduledPayments/ScheduledPayments.tsx
+++ b/src/pages/ScheduledPayments/ScheduledPayments.tsx
@@ -107,7 +107,6 @@ class ScheduledPayments extends React.Component<any> {
                 <ScheduledPaymentItem
                     t={t}
                     key={key}
-                    BunqJSClient={this.props.BunqJSClient}
                     scheduledPayment={scheduledPayment}
                     showInactive={this.state.showInactive}
                     deleteLoading={this.state.deleteLoading || this.props.scheduledPaymentsLoading}
@@ -125,7 +124,6 @@ class ScheduledPayments extends React.Component<any> {
 
                 <ScheduledPaymentsEditDialog
                     t={t}
-                    BunqJSClient={this.props.BunqJSClient}
                     scheduledPayments={this.props.scheduledPayments}
                     selectedPaymentIndex={this.state.selectedPaymentIndex}
                     selectScheduledPayment={this.selectScheduledPayment}
@@ -135,7 +133,6 @@ class ScheduledPayments extends React.Component<any> {
                     <Paper>
                         <AccountList
                             updateExternal={this.updateScheduledPayments}
-                            BunqJSClient={this.props.BunqJSClient}
                         />
                     </Paper>
                 </Grid>
@@ -198,7 +195,7 @@ const mapDispatchToProps = (dispatch, ownProps) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
         scheduledPaymentsInfoUpdate: (userId, accountId) =>
-            dispatch(scheduledPaymentsInfoUpdate(BunqJSClient, userId, accountId))
+            dispatch(scheduledPaymentsInfoUpdate(userId, accountId))
     };
 };
 
diff --git a/src/pages/ScheduledPayments/ScheduledPaymentsEditDialog.tsx b/src/pages/ScheduledPayments/ScheduledPaymentsEditDialog.tsx
index 70b78dfe..0e3c75f9 100644
--- a/src/pages/ScheduledPayments/ScheduledPaymentsEditDialog.tsx
+++ b/src/pages/ScheduledPayments/ScheduledPaymentsEditDialog.tsx
@@ -147,7 +147,7 @@ class ScheduledPaymentsEditDialog extends React.Component {
     };
 
     render() {
-        const { t, BunqJSClient, scheduledPayments } = this.props;
+        const { t, scheduledPayments } = this.props;
         const { selectedPaymentIndex } = this.state;
         const open = selectedPaymentIndex !== false;
         const isValid = this.state.description.length <= 140;
@@ -175,7 +175,7 @@ class ScheduledPaymentsEditDialog extends React.Component {
                     <ListItem>
                         {imageUUID && (
                             <Avatar style={styles.smallAvatar}>
-                                <AttachmentImage height={60} BunqJSClient={BunqJSClient} imageUUID={imageUUID} />
+                                <AttachmentImage height={60} imageUUID={imageUUID} />
                             </Avatar>
                         )}
 
@@ -253,7 +253,7 @@ const mapStateToProps = state => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     const { BunqJSClient } = ownProps;
     return {
-        scheduledPaymentUpdate: (...params) => dispatch(scheduledPaymentUpdate(BunqJSClient, ...params))
+        scheduledPaymentUpdate: (...params) => dispatch(scheduledPaymentUpdate(...params))
     };
 };
 
diff --git a/src/pages/Stats/Stats.tsx b/src/pages/Stats/Stats.tsx
index 04501c7f..daf1095c 100644
--- a/src/pages/Stats/Stats.tsx
+++ b/src/pages/Stats/Stats.tsx
@@ -318,7 +318,7 @@ class Stats extends React.Component<any> {
                     </Paper>
 
                     <Paper style={styles.sideBarPaper}>
-                        <AccountList BunqJSClient={this.props.BunqJSClient} denseMode={true} />
+                        <AccountList denseMode={true} />
                     </Paper>
 
                     <EventCountSidebarSection
diff --git a/src/store/accounts/index.ts b/src/store/accounts/index.ts
index 126f9590..0f32ad14 100644
--- a/src/store/accounts/index.ts
+++ b/src/store/accounts/index.ts
@@ -1,13 +1,13 @@
 import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { ipcRenderer } from "electron";
 import store from "store";
+import { AppWindow } from "~app";
 
 import { EXCLUDED_ACCOUNT_IDS, SELECTED_ACCOUNT_LOCATION, STORED_ACCOUNTS } from "~misc/consts";
-import BunqDesktopClient from "~components/BunqDesktopClient";
 import { formatMoney } from "~functions/Utils";
 import settings from "~importwrappers/electronSettings";
 
-declare let window: Window & { BunqDesktopClient: BunqDesktopClient };
+declare let window: AppWindow;
 
 const excludedAccountIdsStored = settings.get(EXCLUDED_ACCOUNT_IDS);
 const selectedAccountStored = store.get(SELECTED_ACCOUNT_LOCATION);
@@ -17,7 +17,6 @@ const excludedAccountIdsDefault: Array<number> = excludedAccountIdsStored !== un
 
 export interface ISetInfoPayload {
     accounts: any;
-    BunqJSClient: boolean;
 }
 
 const setInfoAction = createAction("setInfo");
@@ -34,9 +33,10 @@ const updateAccountStatusNotLoadingAction = createAction("updateAccountStatusNot
 
 // TODO: remove this dependency
 function pleaseTurnThisClearFunctionIntoASagaSubscriber(state: IAccountsState) {
-    const BunqDesktopClient = window.BunqDesktopClient;
-    BunqDesktopClient.storeRemove(SELECTED_ACCOUNT_LOCATION);
-    BunqDesktopClient.storeRemove(STORED_ACCOUNTS);
+    if (window.BunqDesktopClient) {
+        window.BunqDesktopClient.storeRemove(SELECTED_ACCOUNT_LOCATION);
+        window.BunqDesktopClient.storeRemove(STORED_ACCOUNTS);
+    }
 
     ipcRenderer.send("set-tray-accounts", false);
     ipcRenderer.send("set-tray-balance", false);
@@ -64,24 +64,17 @@ const initialState = {
 };
 
 const slice = createSlice({
-    name: "actions",
+    name: "accounts",
     initialState,
     reducers: {
         [setInfoAction.type](state, action: PayloadAction<ISetInfoPayload>) {
-            // store the data if we have access to the bunqjsclient
-            if (action.payload.BunqJSClient) {
-                const BunqDesktopClient = window.BunqDesktopClient;
-                BunqDesktopClient.storeEncrypt(
-                    {
-                        items: action.payload.accounts
-                    },
-                    STORED_ACCOUNTS
-                )
-                    .then(() => {
-                    })
-                    .catch(() => {
-                    });
-            }
+            const BunqDesktopClient = window.BunqDesktopClient;
+            BunqDesktopClient.storeEncrypt(
+                {
+                    items: action.payload.accounts
+                },
+                STORED_ACCOUNTS
+            ).then();
 
             ipcRenderer.send(
                 "set-tray-accounts",
diff --git a/src/store/accounts/thunks.ts b/src/store/accounts/thunks.ts
index b90d4995..90606dc0 100644
--- a/src/store/accounts/thunks.ts
+++ b/src/store/accounts/thunks.ts
@@ -1,41 +1,36 @@
 import { ThunkAction } from "redux-thunk";
+import { AppWindow } from "~app";
 
-import BunqDesktopClient from "~components/BunqDesktopClient";
 import BunqErrorHandler from "~functions/BunqErrorHandler";
-import MonetaryAccount from "~models/MonetaryAccount";
 import { STORED_ACCOUNTS } from "~misc/consts";
 import { AppDispatch, BatchedActions } from "~store/index";
 import { actions } from "./index";
 import { actions as snackbarActions } from "../snackbar";
 
-declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+declare let window: AppWindow;
 
-export function loadStoredAccounts(BunqJSClient) {
+export function loadStoredAccounts() {
     return async (dispatch) => {
         const BunqDesktopClient = window.BunqDesktopClient;
         try {
             const data = await BunqDesktopClient.storeDecrypt(STORED_ACCOUNTS);
-            if (data && data.items) {
-                // turn plain objects back into MonetaryAccount objects
-                const accountsOld = data.items.map(item => new MonetaryAccount(item));
-                dispatch(actions.setInfo({ accounts: accountsOld, BunqJSClient }));
+            if (data?.items) {
+                dispatch(actions.setInfo({ accounts: data.items }));
             }
         } catch (e) {
         }
     };
 }
 
-export function accountsUpdate(BunqJSClient, userId): ThunkAction<any, any, any, any> {
+export function accountsUpdate(userId): ThunkAction<any, any, any, any> {
     const failedMessage = window.t("We failed to load your monetary accounts");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return async (dispatch) => {
         dispatch(actions.isLoading());
         const batchedActions = [];
         try {
-            const accounts = await BunqJSClient.api.monetaryAccount.list(userId);
-            // turn plain objects into MonetaryAccount objects
-            const accountsNew = accounts.map(item => new MonetaryAccount(item));
-            batchedActions.push(actions.setInfo({ accounts: accountsNew, BunqJSClient }));
+            batchedActions.push(actions.setInfo({ accounts: await BunqJSClient.api.monetaryAccount.list(userId) }));
         } catch (error) {
             BunqErrorHandler(batchedActions, error, failedMessage);
         } finally {
@@ -45,17 +40,17 @@ export function accountsUpdate(BunqJSClient, userId): ThunkAction<any, any, any,
 }
 
 export function createAccount(
-    BunqJSClient,
     userId,
     currency,
     description,
     dailyLimit,
     color,
-    savingsGoal = false,
+    savingsGoal = '',
     accountType = "MonetaryAccountBank"
 ) {
     const failedMessage: string = window.t("We received the following error while creating your account");
     const successMessage: string = window.t("Account created successfully!");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return async (dispatch: AppDispatch) => {
         dispatch(actions.isLoading());
@@ -97,7 +92,7 @@ export function createAccount(
         try {
             await apiPromise;
             batchedActions.push(snackbarActions.open({ message: successMessage }));
-            batchedActions.push(accountsUpdate(BunqJSClient, userId));
+            batchedActions.push(accountsUpdate(userId));
         } catch (error) {
             BunqErrorHandler(batchedActions, error, failedMessage);
         } finally {
@@ -107,7 +102,6 @@ export function createAccount(
 }
 
 export function accountsUpdateImage(
-    BunqJSClient,
     userId,
     accountId,
     attachmentId,
@@ -115,6 +109,7 @@ export function accountsUpdateImage(
 ) {
     const failedMessage = window.t("We received the following error while updating the image for the monetary account");
     const successMessage = window.t("Image updated successfully!");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return async (dispatch) => {
         dispatch(actions.isLoading());
@@ -143,7 +138,7 @@ export function accountsUpdateImage(
 
             await apiPromise;
             batchedActions.push(snackbarActions.open(successMessage));
-            batchedActions.push(accountsUpdate(BunqJSClient, userId));
+            batchedActions.push(accountsUpdate(userId));
         } catch (error) {
             BunqErrorHandler(dispatch, error, failedMessage);
         } finally {
@@ -152,9 +147,10 @@ export function accountsUpdateImage(
     };
 }
 
-export function accountsDeactivate(BunqJSClient, userId, accountId, reason, accountType = "MonetaryAccountBank") {
+export function accountsDeactivate(userId, accountId, reason, accountType = "MonetaryAccountBank") {
     const failedMessage = window.t("We received the following error while deactivating your account");
     const successMessage = window.t("Account deactivated successfully!");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return async (dispatch) => {
         dispatch(actions.updateAccountStatusLoading());
@@ -177,7 +173,7 @@ export function accountsDeactivate(BunqJSClient, userId, accountId, reason, acco
         try {
             await apiHandler.putCancel(userId, accountId, "CANCELLED", "REDEMPTION_VOLUNTARY", reason);
             batchedActions.push(snackbarActions.open({ message: successMessage }));
-            batchedActions.push(accountsUpdate(BunqJSClient, userId));
+            batchedActions.push(accountsUpdate(userId));
         } catch (error) {
             BunqErrorHandler(dispatch, error, failedMessage);
         } finally {
@@ -187,7 +183,6 @@ export function accountsDeactivate(BunqJSClient, userId, accountId, reason, acco
 }
 
 export function accountsUpdateSettings(
-    BunqJSClient,
     userId,
     accountId,
     monetaryAccountSettings,
@@ -195,6 +190,7 @@ export function accountsUpdateSettings(
 ) {
     const failedMessage = window.t("We received the following error updating the settings for your account");
     const successMessage = window.t("Account settings updated successfully!");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return async (dispatch) => {
         dispatch(actions.updateAccountStatusLoading());
@@ -217,7 +213,7 @@ export function accountsUpdateSettings(
         try {
             await apiHandler.put(userId, accountId, monetaryAccountSettings);
             batchedActions.push(snackbarActions.open({ message: successMessage }));
-            batchedActions.push(accountsUpdate(BunqJSClient, userId));
+            batchedActions.push(accountsUpdate(userId));
         } catch (error) {
             BunqErrorHandler(dispatch, error, failedMessage);
         } finally {
diff --git a/src/store/bunqMeTab/thunks.ts b/src/store/bunqMeTab/thunks.ts
index 0ac74bc0..0b1eddd5 100644
--- a/src/store/bunqMeTab/thunks.ts
+++ b/src/store/bunqMeTab/thunks.ts
@@ -1,15 +1,17 @@
 import BunqJSClient from "@bunq-community/bunq-js-client";
+import { AppWindow } from "~app";
 
 import BunqErrorHandler from "~functions/BunqErrorHandler";
 import { actions } from "./index";
 import { actions as bunqMeTabsActions } from "../bunqMeTabs";
 import { actions as snackbarActions } from "../snackbar";
 
-declare let window: Window & { t: Function };
+declare let window: AppWindow;
 
-export function bunqMeTabSend(BunqJSClient: BunqJSClient, userId: number, accountId: number, description, amount, options = {}) {
+export function bunqMeTabSend(userId: number, accountId: number, description, amount, options = {}) {
     const failedMessage: string = window.t("We received the following error while creating your bunqme request");
     const successMessage: string = window.t("bunqme request created successfully!");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return async (dispatch) => {
         dispatch(actions.isLoading());
@@ -22,7 +24,6 @@ export function bunqMeTabSend(BunqJSClient: BunqJSClient, userId: number, accoun
             // TODO: turn into a saga listening for updated tabs
             batchedActions.push(bunqMeTabsActions.setInfo({
                 resetOldItems: false,
-                BunqJSClient: !!BunqJSClient,
                 account_id: accountId.toString(),
             }));
         } catch (error) {
@@ -33,9 +34,10 @@ export function bunqMeTabSend(BunqJSClient: BunqJSClient, userId: number, accoun
     };
 }
 
-export function bunqMeTabPut(BunqJSClient: BunqJSClient, userId: number, accountId: number, tabId: number, status = "CANCELLED") {
+export function bunqMeTabPut(userId: number, accountId: number, tabId: number, status = "CANCELLED") {
     const failedMessage = window.t("We received the following error while updating your bunqme request");
     const successMessage = window.t("bunqme request status has been updated successfully!");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return async (dispatch) => {
         dispatch(actions.isLoading());
@@ -48,7 +50,6 @@ export function bunqMeTabPut(BunqJSClient: BunqJSClient, userId: number, account
             // TODO: move into a saga
             batchedActions.push(bunqMeTabsActions.setInfo({
                 resetOldItems: false,
-                BunqJSClient: !!BunqJSClient,
                 account_id: accountId.toString(),
             }));
         } catch (error) {
diff --git a/src/store/bunqMeTabs/index.ts b/src/store/bunqMeTabs/index.ts
index ddcdf4d8..2311916a 100644
--- a/src/store/bunqMeTabs/index.ts
+++ b/src/store/bunqMeTabs/index.ts
@@ -1,10 +1,11 @@
 import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { AppWindow } from "~app";
 
 import { STORED_BUNQ_ME_TABS } from "~misc/consts";
 import BunqDesktopClient from "~components/BunqDesktopClient";
 import MergeApiObjects from "~functions/MergeApiObjects";
 
-declare let window: Window & { BunqDesktopClient: BunqDesktopClient };
+declare let window: AppWindow;
 
 interface ISetInfoPayload {
     BunqJSClient?: boolean;
@@ -19,7 +20,7 @@ const setInfoAction = createAction("setInfo", (
         resetOldItems = false,
         bunqMeTabs = [],
         account_id,
-    }: ISetInfoPayload) => ({ payload: { BunqJSClient, resetOldItems, bunqMeTabs, account_id } }));
+    }: ISetInfoPayload) => ({ payload: { resetOldItems, bunqMeTabs, account_id } }));
 const isLoadingAction = createAction("isLoading");
 const isNotLoadingAction = createAction("isNotLoading");
 const clearAction = createAction("clear");
@@ -76,21 +77,13 @@ const slice = createSlice({
             // limit payments to 1000 in total
             const mergedBunqMeTabs = mergedInfo.items.slice(0, 1000);
 
-            // store the data if we have access to the bunqjsclient
-            if (action.payload.BunqJSClient) {
-                const BunqDesktopClient = window.BunqDesktopClient;
-                BunqDesktopClient.storeEncrypt(
-                    {
-                        items: mergedBunqMeTabs,
-                        account_id: action.payload.account_id
-                    },
-                    STORED_BUNQ_ME_TABS
-                )
-                    .then(() => {
-                    })
-                    .catch(() => {
-                    });
-            }
+            window.BunqDesktopClient.storeEncrypt(
+                {
+                    items: mergedBunqMeTabs,
+                    account_id: action.payload.account_id
+                },
+                STORED_BUNQ_ME_TABS
+            ).then();
 
             // update newer and older id for this monetary account
             const newerIds = {
diff --git a/src/store/bunqMeTabs/thunks.ts b/src/store/bunqMeTabs/thunks.ts
index 4618c18d..023d608d 100644
--- a/src/store/bunqMeTabs/thunks.ts
+++ b/src/store/bunqMeTabs/thunks.ts
@@ -1,12 +1,13 @@
+import { AppWindow } from "~app";
 import { STORED_BUNQ_ME_TABS } from "~misc/consts";
 import BunqDesktopClient from "~components/BunqDesktopClient";
 import BunqErrorHandler from "~functions/BunqErrorHandler";
 import BunqMeTab from "~models/BunqMeTab";
 import { actions } from "./index";
 
-declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+declare let window: AppWindow;
 
-export function loadStoredBunqMeTabs(BunqJSClient) {
+export function loadStoredBunqMeTabs() {
     return async (dispatch) => {
         dispatch(actions.isLoading());
         const BunqDesktopClient = window.BunqDesktopClient;
@@ -26,7 +27,6 @@ export function loadStoredBunqMeTabs(BunqJSClient) {
 }
 
 export function bunqMeTabsUpdate(
-    BunqJSClient,
     user_id,
     accountId,
     options = {
@@ -36,6 +36,7 @@ export function bunqMeTabsUpdate(
     }
 ) {
     const failedMessage = window.t("We failed to load the bunqme requests for this monetary account");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return async (dispatch) => {
         dispatch(actions.isLoading());
@@ -48,7 +49,6 @@ export function bunqMeTabsUpdate(
                 bunqMeTabs: bunqMeTabsNew,
                 account_id: accountId,
                 resetOldItems: false,
-                BunqJSClient
             }));
             batchedActions.push(actions.isNotLoading());
         } catch (error) {
diff --git a/src/store/cardCvc2/thunks.ts b/src/store/cardCvc2/thunks.ts
index 4fe903e5..c6d43474 100644
--- a/src/store/cardCvc2/thunks.ts
+++ b/src/store/cardCvc2/thunks.ts
@@ -1,8 +1,9 @@
+import { AppWindow } from "~app";
 import BunqDesktopClient from "~components/BunqDesktopClient";
 import BunqErrorHandler from "~functions/BunqErrorHandler";
 import { actions } from "./index";
 
-declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+declare let window: AppWindow;
 
 export function cardUpdateCvc2Codes(user_id, card_id) {
     const failedMessage = window.t("We failed to load the CVC codes");
diff --git a/src/store/cards/thunks.ts b/src/store/cards/thunks.ts
index e5c47cd1..135f8ff2 100644
--- a/src/store/cards/thunks.ts
+++ b/src/store/cards/thunks.ts
@@ -1,9 +1,10 @@
+import { AppWindow } from "~app";
 import BunqDesktopClient from "~components/BunqDesktopClient";
 import BunqErrorHandler from "~functions/BunqErrorHandler";
 import Card from "~models/Card";
 import { actions } from "./index";
 
-declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+declare let window: AppWindow;
 
 export function cardsUpdate(user_id) {
     const failedMessage = window.t("We failed to load the cards overview");
diff --git a/src/store/categoryRules/index.ts b/src/store/categoryRules/index.ts
index ea559b5a..ff75aa34 100644
--- a/src/store/categoryRules/index.ts
+++ b/src/store/categoryRules/index.ts
@@ -1,10 +1,10 @@
 import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
-import _ from "lodash";
 
 import { STORED_CATEGORY_RULES } from "~misc/consts";
 import settings from "~importwrappers/electronSettings";
 import { RuleCollectionList } from "~types/Types";
-import RuleCollection from "~types/RuleCollection";
+import { IRuleCollection } from "~types/RuleCollection";
+import RuleCollection from "~models/RuleCollection";
 
 // default category rules if no previous were found
 
@@ -48,12 +48,14 @@ const removeRuleAction = createAction("removeRule");
 
 export interface ICategoryRulesState {
     last_update: number;
-    category_rules: RuleCollectionList;
+    category_rules: {
+        [key: string]: IRuleCollection;
+    };
 }
 
 const initialState: ICategoryRulesState = {
     last_update: +new Date(),
-    category_rules: _.toPlainObject(formattedCategoryRulesDefault),
+    category_rules: JSON.parse(JSON.stringify(formattedCategoryRulesDefault)),
 };
 
 const slice = createSlice({
@@ -105,7 +107,7 @@ const slice = createSlice({
 
             if (storedCategoryRules) {
                 Object.keys(storedCategoryRules).forEach(id => {
-                    parsedStoredList[id] = _.toPlainObject(new RuleCollection(storedCategoryRules[id]));
+                    parsedStoredList[id] = JSON.parse(JSON.stringify(new RuleCollection(storedCategoryRules[id])));
                 });
             }
 
diff --git a/src/store/contacts/index.ts b/src/store/contacts/index.ts
index 64c0ecfa..56d2d855 100644
--- a/src/store/contacts/index.ts
+++ b/src/store/contacts/index.ts
@@ -1,10 +1,11 @@
 import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
 import _ from "lodash";
+import { AppWindow } from "~app";
 
 import BunqDesktopClient from "~components/BunqDesktopClient";
 import { STORED_CONTACTS } from "~misc/consts";
 
-declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+declare let window: AppWindow;
 
 export interface ISetInfoTypePayload {
     type: string;
@@ -20,7 +21,7 @@ export interface ISetInfoPayload {
 
 const setInfoAction = createAction(
     "setInfo",
-    ({ BunqJSClient = false, contacts }: ISetInfoPayload) => ({ payload: { BunqJSClient, contacts }})
+    ({ BunqJSClient = false, contacts }: ISetInfoPayload) => ({ payload: { contacts } })
 );
 const isLoadingAction = createAction("isLoading");
 const isNotLoadingAction = createAction("isNotLoading");
@@ -132,27 +133,15 @@ const slice = createSlice({
                 newState.contacts[action.payload.type] = [];
                 newState.last_update = +new Date();
 
-                // store the data if we have access to the bunqjsclient
-                if (action.payload.BunqJSClient) {
-                    const BunqDesktopClient = window.BunqDesktopClient;
-                    BunqDesktopClient.storeEncrypt(
-                        {
-                            items: newState.contacts
-                        },
-                        STORED_CONTACTS
-                    )
-                        .then();
-                }
+                window.BunqDesktopClient.storeEncrypt(
+                    {
+                        items: newState.contacts
+                    },
+                    STORED_CONTACTS
+                ).then();
             } else {
                 // remove the data completely
-                if (action.payload.BunqJSClient) {
-                    // FIXME: can't pass BunqJSClient as payload
-                    // action.payload.BunqJSClient.Session.asyncStorageRemove(STORED_CONTACTS)
-                    //     .then(() => {
-                    //     })
-                    //     .catch(() => {
-                    //     });
-                }
+                window.BunqDesktopClient.BunqJSClient.Session.asyncStorageRemove(STORED_CONTACTS).then();
             }
 
             return initialState;
diff --git a/src/store/contacts/thunks.ts b/src/store/contacts/thunks.ts
index 45ac8057..821aed89 100644
--- a/src/store/contacts/thunks.ts
+++ b/src/store/contacts/thunks.ts
@@ -1,6 +1,7 @@
 import url from "url";
 import axios from "axios";
 import vcf from "vcf";
+import { AppWindow } from "~app";
 
 import BunqDesktopClient from "~components/BunqDesktopClient";
 import Logger from "~functions/Logger";
@@ -11,7 +12,7 @@ import { STORED_CONTACTS } from "~misc/consts";
 import { AppDispatch, BatchedActions } from "~store/index";
 import { actions } from "./index";
 
-declare let window: Window & { BunqDesktopClient: BunqDesktopClient; t: Function };
+declare let window: AppWindow;
 
 export function loadStoredContacts() {
     return async (dispatch: AppDispatch) => {
@@ -26,7 +27,7 @@ export function loadStoredContacts() {
     };
 }
 
-export function contactInfoUpdateGoogle(BunqJSClient, accessToken) {
+export function contactInfoUpdateGoogle(accessToken) {
     const failedMessage = window.t("We failed to load the contacts from your Google account");
 
     return async (dispatch: AppDispatch) => {
@@ -114,7 +115,7 @@ export function contactInfoUpdateGoogle(BunqJSClient, accessToken) {
     };
 }
 
-export function contactInfoUpdateOffice365(BunqJSClient, accessToken) {
+export function contactInfoUpdateOffice365(accessToken) {
     const failedMessage = window.t("We failed to load the contacts from your Google account");
 
     return async (dispatch) => {
@@ -193,7 +194,7 @@ export function contactInfoUpdateOffice365(BunqJSClient, accessToken) {
     };
 }
 
-export function contactInfoUpdateApple(BunqJSClient, files) {
+export function contactInfoUpdateApple(files) {
     const failedMessage = window.t("We failed to load the contacts from the vCard file");
 
     return async (dispatch: AppDispatch) => {
diff --git a/src/store/exportNew/thunks.ts b/src/store/exportNew/thunks.ts
index 2e66998d..101258d5 100644
--- a/src/store/exportNew/thunks.ts
+++ b/src/store/exportNew/thunks.ts
@@ -6,7 +6,6 @@ import { actions } from "./index";
 declare let window: AppWindow;
 
 export function exportNew(
-    BunqJSClient,
     user_id,
     account_id,
     statement_format,
diff --git a/src/store/exports/thunks.ts b/src/store/exports/thunks.ts
index 772930c1..b980f4d6 100644
--- a/src/store/exports/thunks.ts
+++ b/src/store/exports/thunks.ts
@@ -6,7 +6,6 @@ import { actions } from "./index";
 declare let window: AppWindow;
 
 export function exportInfoUpdate(
-    BunqJSClient,
     user_id,
     account_id,
     options = {
diff --git a/src/store/index.ts b/src/store/index.ts
index da03a690..39cda217 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,5 +1,5 @@
-import { configureStore, getDefaultMiddleware, Slice, ThunkAction } from "@reduxjs/toolkit";
-import { AnyAction, combineReducers, Dispatch } from "redux";
+import { configureStore, getDefaultMiddleware, ThunkAction } from "@reduxjs/toolkit";
+import { AnyAction, Dispatch } from "redux";
 import createSagaMiddleware from "redux-saga";
 import { reduxBatch } from "@manaflair/redux-batch";
 
@@ -8,6 +8,7 @@ import accounts from "./accounts";
 import application from "./application";
 import amountFilter from "./amountFilter";
 import bunqMeTab from "./bunqMeTab";
+import bunqMeTabFilter from "./bunqMeTabFilter";
 import bunqMeTabs from "./bunqMeTabs";
 import cardCvc2 from "./cardCvc2";
 import cardIdFilter from "./cardIdFilter";
@@ -54,14 +55,13 @@ import sidebar from "~reducers/sidebar";
 import user from "~reducers/user";
 import users from "~reducers/users";
 
-const slices: {
-    [key: string]: Slice;
-} = {
+const slices = {
     accountIdFilter,
     accounts,
     application,
     amountFilter,
     bunqMeTab,
+    bunqMeTabFilter,
     bunqMeTabs,
     cardCvc2,
     cardIdFilter,
@@ -82,6 +82,7 @@ const reducer = {
     application: application.reducer,
     amountFilter: amountFilter.reducer,
     bunqMeTab: bunqMeTab.reducer,
+    bunqMeTabFilter: bunqMeTabFilter.reducer,
     bunqMeTabs: bunqMeTabs.reducer,
     cardCvc2: cardCvc2.reducer,
     cardIdFilter: cardIdFilter.reducer,
diff --git a/src/types/MonetaryAccount.ts b/src/types/MonetaryAccount.ts
new file mode 100644
index 00000000..5f81a7b3
--- /dev/null
+++ b/src/types/MonetaryAccount.ts
@@ -0,0 +1,33 @@
+import NotificationFilter from "@bunq-community/bunq-js-client/dist/Types/NotificationFilter";
+import { AccountType, Alias, AllCoOwner, Amount, Avatar, Balance, MonetaryAccountSetting } from "~types/Types";
+
+export interface IMonetaryAccount {
+    // account type of this monetary account
+    accountType: AccountType;
+
+    // common fields
+    id: number;
+    created: Date;
+    updated: Date;
+    avatar: Avatar;
+    currency: "EUR";
+    description: string;
+    daily_limit: Amount;
+    daily_spent: Amount;
+    overdraft_limit: Amount;
+    balance: Balance;
+    alias: Alias[];
+    public_uuid: string;
+    status: "ACTIVE" | "BLOCKED" | "CANCELLED" | "PENDING_REOPEN";
+    sub_status: string;
+    user_id: number;
+    monetary_account_profile: any;
+    notification_filters: NotificationFilter[];
+    setting: MonetaryAccountSetting;
+
+    savings_goal: Amount;
+    savings_goal_progress: string;
+
+    // only available on MonetaryAccountJoint objects
+    all_co_owner: AllCoOwner | undefined;
+}
diff --git a/src/types/RuleCollection.ts b/src/types/RuleCollection.ts
index b09278ce..439da80b 100644
--- a/src/types/RuleCollection.ts
+++ b/src/types/RuleCollection.ts
@@ -28,534 +28,12 @@ export type RuleCollectionCheckRulesResult = {
     matchedRules: EventObjectMatchingRule[];
 };
 
-export default class RuleCollection {
-    private id: string | null = null;
-    private title: string = "";
-    private matchType: RuleCollectionMatchType = "OR";
-    private rules: Rule[] = [];
-    private categories: string[] = [];
-    private enabled: boolean;
-
-    constructor(rules: Rule[] = [], categories: string[] = []) {
-        this.rules = rules;
-        this.categories = categories;
-    }
-
-    public setRules(rules: Rule[]): void {
-        this.rules = rules;
-    }
-    public getRules(): Rule[] {
-        return this.rules;
-    }
-
-    public setCategories(categories: string[]): void {
-        this.categories = categories;
-    }
-    public getCategories(): string[] {
-        return this.categories;
-    }
-
-    public setTitle(title: string): void {
-        this.title = title;
-    }
-    public getTitle(): string {
-        return this.title;
-    }
-
-    public setEnabled(enabled: boolean): void {
-        this.enabled = enabled;
-    }
-    public isEnabled(): boolean {
-        return this.enabled;
-    }
-
-    public setMatchType(matchType: "OR" | "AND"): void {
-        this.matchType = matchType;
-    }
-    public getMatchType(): string {
-        return this.matchType;
-    }
-
-    public setId(id: string): void {
-        this.id = id;
-    }
-    public getId(): string {
-        return this.id;
-    }
-
-    /**
-     * Ensure a valid ID is set and generate a new one if not
-     */
-    public ensureId(): void {
-        if (!this.id || this.id === null || this.id.length === 0) {
-            this.generateId();
-        }
-    }
-
-    /**
-     * Generate a random ID for this collection
-     */
-    public generateId(): void {
-        this.id = generateGUID();
-    }
-
-    /**
-     * Goes through all events and returns the ones
-     * @param {EventObject[]} events
-     * @returns {EventObjectResult[]}
-     */
-    public filterItems(events: EventObject[]): EventObjectResult[] {
-        const resultingEvents: EventObjectResult[] = [];
-        const ruleCount = this.rules.length;
-
-        events.forEach((event: EventObject) => {
-            let matches = false;
-            let matchingRules: EventObjectMatchingRule[] = [];
-
-            if (ruleCount === 0) {
-                // if rule count is 0 it automatically matches nothing
-                matches = false;
-            } else {
-                const { ruleResult, matchedRules } = this.checkRules(event);
-                matches = ruleResult;
-                matchingRules = matchedRules;
-            }
-
-            // add this event to the resulting events list
-            resultingEvents.push({
-                item: event.item,
-                type: event.type,
-                matches: matches,
-                matchingRules: matchingRules
-            });
-        });
-
-        return resultingEvents;
-    }
-
-    /**
-     * Checks if a single item matches all the currently set rules
-     * @param {EventObject} event
-     * @returns {boolean}
-     */
-    public checkRules(event: EventObject): RuleCollectionCheckRulesResult {
-        const matchingRules: EventObjectMatchingRule[] = [];
-        let checkRuleResult = false;
-
-        if (this.matchType === "AND") {
-            // all rules should match so we return using "every" which returns true of all are true
-            checkRuleResult = this.rules.every((rule: Rule) => {
-                const ruleResult = this.checkRule(rule, event);
-                matchingRules.push({
-                    rule: rule,
-                    matched: ruleResult
-                });
-                return ruleResult;
-            });
-        } else {
-            // only one has to match so we return using "some" which stops on the first match
-            checkRuleResult = this.rules.some((rule: Rule) => {
-                const ruleResult = this.checkRule(rule, event);
-                matchingRules.push({
-                    rule: rule,
-                    matched: ruleResult
-                });
-                return ruleResult;
-            });
-        }
-
-        return {
-            ruleResult: checkRuleResult,
-            matchedRules: matchingRules
-        };
-    }
-
-    /**
-     * Checks if a single item matches a single rule
-     * @param {Rule} rule
-     * @param {EventObject} event
-     * @returns {boolean}
-     */
-    public checkRule(rule: Rule, event: EventObject): boolean {
-        // return an iterator function which has access to the event
-        switch (rule.ruleType) {
-            case "VALUE":
-                return this.checkValueRule(rule, event);
-            case "TRANSACTION_AMOUNT":
-                return this.checkTransactionAmountRule(rule, event);
-            case "ITEM_TYPE":
-                return this.checkItemTypeRule(rule, event);
-            case "ACCOUNT_TYPE":
-                return this.checkAccountTypeRule(rule, event);
-        }
-        return false;
-    }
-
-    /**
-     * Check if a field or custom field matches the given value
-     * @param {ValueRule} rule
-     * @param {EventObject} event
-     * @returns {boolean}
-     */
-    private checkValueRule(rule: ValueRule, event: EventObject): boolean {
-        let dataToCheck = [];
-        switch (rule.field) {
-            case "DESCRIPTION":
-                if (event.item.description) {
-                    dataToCheck.push(event.item.description);
-                }
-                break;
-            case "IBAN":
-                switch (event.type) {
-                    case "BunqMeTab":
-                    case "MasterCardAction":
-                        return false;
-
-                    case "Payment":
-                        // just check both
-                        const ibanAlias = event.item.alias.iban;
-                        const ibanCounterparty = event.item.alias.iban;
-
-                        // don't push invalid/missing iban values
-                        if (ibanAlias) dataToCheck.push(ibanAlias);
-                        if (ibanCounterparty) dataToCheck.push(ibanCounterparty);
-                        break;
-
-                    case "RequestResponse":
-                    case "RequestInquiry":
-                        const iban = event.item.counterparty_alias.iban;
-                        // return false if null
-                        if (iban === null) return false;
-                        dataToCheck.push(iban);
-                        break;
-                }
-
-                dataToCheck = null;
-                break;
-            case "COUNTERPARTY_NAME":
-                if (event.item.counterparty_alias) {
-                    dataToCheck.push(event.item.counterparty_alias.display_name);
-                }
-                break;
-            case "CUSTOM":
-                // split the custom field on . character
-                const customFieldParts = rule.customField.split(".");
-
-                let tempObject = event.item;
-                let failedToFind = false;
-                for (let key in customFieldParts) {
-                    const customFieldPart = customFieldParts[key];
-                    // more field parts but the previous wasn't found
-                    if (failedToFind === true) break;
-
-                    if (tempObject[customFieldPart]) {
-                        tempObject = tempObject[customFieldPart];
-                    } else {
-                        failedToFind = true;
-                    }
-                }
-
-                // if we found the custom item, add it to the list
-                if (failedToFind === false) {
-                    dataToCheck.push(tempObject);
-                }
-
-                break;
-            default:
-                return false;
-        }
-
-        // no data found or null so we return true of the rule value is empty
-        if (dataToCheck.length === 0) return rule.value && rule.value.length === 0;
-
-        // go through every item
-        let matchedItem = false;
-        for (var index in dataToCheck) {
-            const dataItem = dataToCheck[index];
-
-            const valueToCheck = dataItem.toString().toLowerCase();
-            const ruleValue = rule.value.toLowerCase();
-
-            switch (rule.matchType) {
-                case "REGEX":
-                    // create a regexp so we can directly use the input value
-                    const regex = new RegExp(rule.value, "igm");
-                    // test the data with the regex pattern
-                    matchedItem = regex.test(valueToCheck);
-                    break;
-                case "EXACT":
-                    matchedItem = valueToCheck === ruleValue;
-                    break;
-                case "CONTAINS":
-                    matchedItem = valueToCheck.includes(ruleValue);
-                    break;
-                case "ENDS_WITH":
-                    matchedItem = valueToCheck.endsWith(ruleValue);
-                    break;
-                case "STARTS_WITH":
-                    matchedItem = valueToCheck.startsWith(ruleValue);
-                    break;
-            }
-
-            // break out since we found a match already
-            if (matchedItem) break;
-        }
-
-        return matchedItem;
-    }
-
-    /**
-     * Check if for the event type the given amount that was transacted is higher/lower than the rule amount
-     * @param {TransactionAmountRule} rule
-     * @param {EventObject} event
-     * @returns {boolean}
-     */
-    private checkTransactionAmountRule(rule: TransactionAmountRule, event: EventObject): boolean {
-        let amount: number = 0;
-        switch (event.type) {
-            case "Payment":
-                amount = parseFloat(event.item.amount.value);
-                break;
-            case "BunqMeTab":
-                // no transaction amount for this so we ignore it
-                return false;
-            case "RequestInquiry":
-                if (event.item.status === "ACCEPTED") {
-                    // accepted so an amount was transferred
-                    amount = parseFloat(event.item.amount_responded.value);
-                } else {
-                    // invalid type, just return false
-                    return false;
-                }
-                break;
-            case "RequestResponse":
-                if (event.item.status === "ACCEPTED") {
-                    // accepted so an amount was transferred
-                    amount = parseFloat(event.item.amount_responded.value);
-                } else {
-                    // invalid type, just return false
-                    return false;
-                }
-                break;
-            case "MasterCardAction":
-                amount = parseFloat(event.item.amount_billing.value);
-                break;
-        }
-
-        // turn negative numbers into possitive numbers for outgoing payments
-        amount = amount < 0 ? amount * -1 : amount;
-
-        switch (rule.matchType) {
-            case "MORE":
-                return rule.amount < amount;
-            case "MORE_EQUALS":
-                return rule.amount <= amount;
-            case "EXACTLY":
-                return rule.amount === amount;
-            case "LESS":
-                return rule.amount > amount;
-            case "LESS_EQUALS":
-                return rule.amount >= amount;
-        }
-    }
-
-    /**
-     * @param {AccountRule} rule
-     * @param {EventObject} event
-     * @returns {boolean}
-     */
-    private checkAccountTypeRule(rule: AccountRule, event: EventObject): boolean {
-        if (event.item.monetary_account_id !== rule.accountId) {
-            return false;
-        }
-
-        if (rule.paymentType === "ALL") {
-            return true;
-        }
-
-        // let amount: number = 0;
-        switch (event.type) {
-            case "Payment":
-                if (rule.paymentType === "SENDS") {
-                    // send type and amount is negative
-                    return event.item.amount.value < 0;
-                } else if (rule.paymentType === "RECEIVES") {
-                    // receive type and amount is positive
-                    return event.item.amount.value > 0;
-                }
-                return false;
-            case "MasterCardAction":
-                if (rule.paymentType === "SENDS") {
-                    return true;
-                }
-                return false;
-            case "BunqMeTab":
-            case "RequestInquiry":
-            case "RequestResponse":
-                return false;
-        }
-    }
-
-    /**
-     * Checks if the given matchType for the rule matches the event type
-     * @param {Rule} rule
-     * @param {EventObject} event
-     * @returns {boolean}
-     */
-    private checkItemTypeRule(rule: TypeRule, event: EventObject): boolean {
-        // simply check if the event type matches the requried rule type
-        switch (rule.matchType) {
-            case "PAYMENT":
-                return event.type === "Payment" || event.type === "MasterCardAction";
-            case "PAYMENT_RECEIVED":
-                // not a payment so false
-                if (event.type !== "Payment") return false;
-
-                return event.item.amount.value > 0;
-            case "PAYMENT_SENT":
-                // all mastercardactions are outgoing payments
-                if (event.type === "MasterCardAction") return true;
-                // not mastercard or payment so false
-                if (event.type !== "Payment") return false;
-
-                return event.item.amount.value < 0;
-            case "REGULAR_PAYMENT":
-                return event.type === "Payment";
-            case "MASTERCARD_PAYMENT":
-                return event.type === "MasterCardAction";
-            case "REQUEST":
-                return event.type === "RequestResponse" || event.type === "RequestInquiry";
-            case "REQUEST_INQUIRY":
-                return event.type === "RequestInquiry";
-            case "REQUEST_RESPONSE":
-                return event.type === "RequestResponse";
-            case "BUNQ_ME_TAB":
-                return event.type === "BunqMeTab";
-        }
-    }
-
-    /**
-     * Return JSON stringified versio nof this object
-     * @returns {string}
-     */
-    public toString(): string {
-        return JSON.stringify({
-            id: this.getId(),
-            rules: this.getRules(),
-            title: this.getTitle(),
-            enabled: this.isEnabled(),
-            matchType: this.getMatchType(),
-            categories: this.getCategories()
-        });
-    }
-
-    /**
-     * Turn JSON string into a valid RuleCollection
-     * @param {string} jsonString
-     * @returns {RuleCollection}
-     */
-    public fromJSON(jsonString: string): RuleCollection {
-        const plainObject = JSON.parse(jsonString);
-        return this.fromObject(plainObject);
-    }
-
-    /**
-     * Turn a plain object into a valid RuleCollection
-     * @param object
-     * @returns {RuleCollection}
-     */
-    public fromObject(object: any): RuleCollection {
-        this.setCategories(object.categories);
-        this.setMatchType(object.matchType);
-        this.setEnabled(object.enabled);
-        this.setRules(object.rules);
-        this.setTitle(object.title);
-        this.setId(object.id);
-
-        return this;
-    }
-
-    /**
-     * Validate a plain ruleCollection object
-     * @param ruleCollection
-     * @returns {ValidationResult | true}
-     */
-    public static validateRuleCollection(ruleCollection: any): ValidationResult | true {
-        // basic type checks
-        if (typeof ruleCollection.categories !== "object")
-            return {
-                valid: false,
-                message: "Invalid 'categories'"
-            };
-        if (typeof ruleCollection.matchType !== "string")
-            return {
-                valid: false,
-                message: "Invalid 'matchType'"
-            };
-        if (typeof ruleCollection.enabled !== "boolean")
-            return {
-                valid: false,
-                message: "Invalid 'enabled' value"
-            };
-        if (typeof ruleCollection.rules !== "object")
-            return {
-                valid: false,
-                message: "Invalid 'rules'"
-            };
-        if (typeof ruleCollection.title !== "string")
-            return {
-                valid: false,
-                message: "Invalid 'title'"
-            };
-
-        // validate categories and rules are arrays
-        if (ruleCollection.categories instanceof Array === false)
-            return {
-                valid: false,
-                message: "Invalid 'categories'"
-            };
-        if (ruleCollection.rules instanceof Array === false)
-            return {
-                valid: false,
-                message: "Invalid 'rules'"
-            };
-
-        // validate that all given categories are strings
-        const allCategoriesAreStrings = ruleCollection.categories.every(categoryId => typeof categoryId === "string");
-        if (allCategoriesAreStrings === false)
-            return {
-                valid: false,
-                message: "One or more given categories are invalid"
-            };
-
-        // validate that all given rules are valid rules
-        const allRulesAreValid = ruleCollection.rules.every(rule => this.validateRule(rule) === true);
-        if (allRulesAreValid === false)
-            return {
-                valid: false,
-                message: "One or more given rules are invalid"
-            };
-
-        return true;
-    }
-
-    /**
-     * Validate a plain rule object
-     * @param rule
-     * @returns {ValidationResult | true}
-     */
-    public static validateRule(rule: any): ValidationResult | true {
-        if (typeof rule !== "object")
-            return {
-                valid: false,
-                message: "Rule isn't a valid object"
-            };
-        if (typeof rule.ruleType !== "string")
-            return {
-                valid: false,
-                message: "Rule contained invalid 'ruleType'"
-            };
-
-        return true;
-    }
+// Serializable interface for Redux
+export interface IRuleCollection {
+    id: string | null;
+    title: string;
+    matchType: RuleCollectionMatchType;
+    rules: Rule[];
+    categories: string[];
+    enabled: boolean;
 }

From e7c8aff1c7b8d08dee2d54fa569a3ca89af9cd38 Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 13:24:07 +0100
Subject: [PATCH 03/26] feat: support dynamic imports w/ TypeScript

---
 tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tsconfig.json b/tsconfig.json
index 21c267ac..b9915dc2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,6 +8,7 @@
         "allowSyntheticDefaultImports": true,
         "esModuleInterop": true,
         "resolveJsonModule": true,
+        "module": "esnext",
         "jsx": "react",
         "allowJs": true,
         "lib": [

From 85cba27248d4da67947d35dcdd1a348a5564fccc Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 13:28:58 +0100
Subject: [PATCH 04/26] chore: set keys of React components in a list

---
 src/components/BunqMeTabList.tsx  |  21 ++++--
 src/components/Routes.tsx         |  10 +--
 src/components/Sidebar.tsx        | 106 +++++++++++++++---------------
 src/components/SwitchKeysMenu.tsx |   3 +-
 4 files changed, 76 insertions(+), 64 deletions(-)

diff --git a/src/components/BunqMeTabList.tsx b/src/components/BunqMeTabList.tsx
index b1ccdb37..91fadb15 100644
--- a/src/components/BunqMeTabList.tsx
+++ b/src/components/BunqMeTabList.tsx
@@ -13,6 +13,7 @@ import IconButton from "@material-ui/core/IconButton";
 import Visible from "@material-ui/icons/Visibility";
 import VisibleOff from "@material-ui/icons/VisibilityOff";
 import UrlIcon from "@material-ui/icons/Link";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import BunqMeTabListItem from "./ListItems/BunqMeTabListItem";
 
@@ -29,12 +30,18 @@ const styles: any = {
     }
 };
 
-class BunqMeTabList extends React.Component<any> {
+interface IState {
+}
+
+interface IProps {
+}
+
+class BunqMeTabList extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
     static defaultProps = {
         secondaryActions: null
     };
 
-    state: any;
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -105,18 +112,18 @@ class BunqMeTabList extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         limitedPermissions: state.user.limited_permissions,
 
-        bunqMeTabs: state.bunq_me_tabs.bunq_me_tabs,
-        bunqMeTabLoading: state.bunq_me_tab.loading,
-        bunqMeTabsLoading: state.bunq_me_tabs.loading
+        bunqMeTabs: state.bunqMeTabs.bunq_me_tabs,
+        bunqMeTabLoading: state.bunqMeTab.loading,
+        bunqMeTabsLoading: state.bunqMeTabs.loading
     };
 };
 
-const mapDispatchToProps = (dispatch) => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open(message)),
         bunqMeTabPut: (userId, accountId, tabId, status) =>
diff --git a/src/components/Routes.tsx b/src/components/Routes.tsx
index 5ee1966a..e5fa23bf 100644
--- a/src/components/Routes.tsx
+++ b/src/components/Routes.tsx
@@ -174,11 +174,12 @@ export default class Routes extends React.Component {
     }
 
     render() {
-        const privateRouteComponents = privateRoutes.map(route => {
+        const privateRouteComponents = privateRoutes.map((route, idx) => {
             const { component, ...props } = route;
             const Component = route.component;
             return (
                 <PrivateRoute
+                    key={idx}
                     apiKey={this.props.apiKey}
                     userType={this.props.userType}
                     derivedPassword={this.props.derivedPassword}
@@ -187,17 +188,18 @@ export default class Routes extends React.Component {
                 />
             );
         });
-        const stantardRouteComponents = standardRoutes.map(route => {
+        const stantardRouteComponents = standardRoutes.map((route, idx) => {
             const { component, ...props } = route;
             const Component = route.component;
-            return <Route render={props => <Component {...props} {...this.props.childProps} />} {...props} />;
+            return <Route key={idx} render={props => <Component {...props} {...this.props.childProps} />} {...props} />;
         });
 
-        const publicRouteComponents = publicRoutes.map(route => {
+        const publicRouteComponents = publicRoutes.map((route, idx) => {
             const { component, ...props } = route;
             const Component = route.component;
             return (
                 <PublicRoute
+                    key={idx}
                     derivedPassword={this.props.derivedPassword}
                     render={props => <Component {...props} {...this.props.childProps} />}
                     {...props}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 43d772aa..46473630 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -102,61 +102,63 @@ class Sidebar extends React.Component {
         const disableNavigationItems = userType === false || derivedPassword === false || apiKey === false;
         const navigationItems = disableNavigationItems
             ? null
-            : [
-                  <ListItemWrapper exact to="/" icon={HomeIcon} text="Dashboard" location={this.props.location} />,
-                  <ListItemWrapper to="/pay" icon={ArrowUpwardIcon} text={"Pay"} location={this.props.location} />,
-                  pendingPaymentsCount === 0 ? null : (
-                      <ListItemWrapper
-                          to="/pending-payments"
-                          icon={ListIcon}
-                          text={`${t("Pending payments")}: ${pendingPaymentsCount}`}
-                          location={this.props.location}
-                          disableTranslation={true}
-                      />
-                  ),
-                  limitedPermissions ? null : (
-                      <ListItemWrapper
-                          to="/request"
-                          icon={ArrowDownwardIcon}
-                          text={"Request"}
-                          location={this.props.location}
-                      />
-                  ),
-                  <ListItemWrapper
-                      to="/bunqme-tab"
-                      icon={ShareIcon}
-                      text={"bunqme Requests"}
-                      location={this.props.location}
-                  />,
-                  <ListItemWrapper to="/cards" icon={CardIcon} text={"Cards"} location={this.props.location} />,
-                  <Divider />,
-                  <ListItemWrapper to="/stats" icon={TimeLineIcon} text={"Stats"} location={this.props.location} />,
-                  <ListItemWrapper
-                      to="/rules-dashboard"
-                      icon={Bookmark}
-                      text="Category management"
-                      location={this.props.location}
-                  />,
-                  <ListItemWrapper
-                      to="/savings-goals"
-                      icon={TrophyIcon}
-                      text="Savings goals"
-                      location={this.props.location}
-                  />,
-                  <ListItemWrapper
-                      to="/exports"
-                      icon={FileUploadIcon}
-                      text={"Exports"}
-                      location={this.props.location}
-                  />
-              ];
+            : (
+                <>
+                    <ListItemWrapper exact to="/" icon={HomeIcon} text="Dashboard" location={this.props.location}/>
+                    <ListItemWrapper to="/pay" icon={ArrowUpwardIcon} text={"Pay"} location={this.props.location}/>
+                    {pendingPaymentsCount === 0 ? null : (
+                        <ListItemWrapper
+                            to="/pending-payments"
+                            icon={ListIcon}
+                            text={`${t("Pending payments")}: ${pendingPaymentsCount}`}
+                            location={this.props.location}
+                            disableTranslation={true}
+                        />
+                    )}
+                    {!limitedPermissions && (
+                        <ListItemWrapper
+                            to="/request"
+                            icon={ArrowDownwardIcon}
+                            text={"Request"}
+                            location={this.props.location}
+                        />
+                    )}
+                    <ListItemWrapper
+                        to="/bunqme-tab"
+                        icon={ShareIcon}
+                        text={"bunqme Requests"}
+                        location={this.props.location}
+                    />
+                    <ListItemWrapper to="/cards" icon={CardIcon} text={"Cards"} location={this.props.location}/>
+                    <Divider/>
+                    <ListItemWrapper to="/stats" icon={TimeLineIcon} text={"Stats"} location={this.props.location}/>
+                    <ListItemWrapper
+                        to="/rules-dashboard"
+                        icon={Bookmark}
+                        text="Category management"
+                        location={this.props.location}
+                    />
+                    <ListItemWrapper
+                        to="/savings-goals"
+                        icon={TrophyIcon}
+                        text="Savings goals"
+                        location={this.props.location}
+                    />
+                    <ListItemWrapper
+                        to="/exports"
+                        icon={FileUploadIcon}
+                        text={"Exports"}
+                        location={this.props.location}
+                    />
+                </>
+            );
 
         const drawerList = (
             <List style={styles.list}>
                 <NavLink to="/application-info" style={styles.bunqLink}>
                     <ListItem button>
                         <ListItemIcon>
-                            <Avatar style={styles.avatar} src="./images/512x512.png" />
+                            <Avatar style={styles.avatar} src="./images/512x512.png"/>
                         </ListItemIcon>
                         <ListItemText
                             primary="bunqDesktop"
@@ -167,11 +169,11 @@ class Sidebar extends React.Component {
 
                 {navigationItems}
 
-                <ListItem style={styles.listFiller} />
+                <ListItem style={styles.listFiller}/>
 
-                <QueueSidebarListItem t={t} />
+                <QueueSidebarListItem t={t}/>
 
-                <ListItemWrapper to="/settings" icon={SettingsIcon} text={"Settings"} location={this.props.location} />
+                <ListItemWrapper to="/settings" icon={SettingsIcon} text={"Settings"} location={this.props.location}/>
             </List>
         );
 
diff --git a/src/components/SwitchKeysMenu.tsx b/src/components/SwitchKeysMenu.tsx
index b8de3149..f0a87a09 100644
--- a/src/components/SwitchKeysMenu.tsx
+++ b/src/components/SwitchKeysMenu.tsx
@@ -126,7 +126,7 @@ class SwitchKeysMenu extends React.Component {
             const secondaryText = `${OAuthText} ${environmentText}`;
 
             return this.state.editMode ? (
-                <ListItem dense>
+                <ListItem dense key={index}>
                     <TextField
                         style={styles.textField}
                         value={storedKeyValues[index] || storedApiKey.device_name}
@@ -136,6 +136,7 @@ class SwitchKeysMenu extends React.Component {
             ) : (
                 <ListItem
                     dense
+                    key={index}
                     button
                     onClick={this.selectApiKey(index)}
                     disabled={storedApiKey.identifier !== derivedPasswordIdentifier}

From 118001e65355e91452b49cf6880e0862f4bfc956 Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 13:29:46 +0100
Subject: [PATCH 05/26] fix: ~models/RuleCollection location in
 rule_collection_check worker

---
 src/webworkers/rule_collection_check.worker.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webworkers/rule_collection_check.worker.js b/src/webworkers/rule_collection_check.worker.js
index 79ae6111..b75079e5 100644
--- a/src/webworkers/rule_collection_check.worker.js
+++ b/src/webworkers/rule_collection_check.worker.js
@@ -1,4 +1,4 @@
-import RuleCollection from "~types/RuleCollection";
+import RuleCollection from "~models/RuleCollection";
 
 onmessage = e => {
     const ruleCollection = new RuleCollection();

From 126e2d61805eb406ed399f164c7e04560ebeda06 Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 13:52:36 +0100
Subject: [PATCH 06/26] fix: Redux actions

---
 src/Actions/registration.js                   |  2 +-
 ...share_invite_monetary_account_inquiries.js | 47 ++++++++--------
 .../share_invite_monetary_account_inquiry.js  | 56 +++++++++----------
 src/components/Queue/QueueManager.tsx         | 22 ++++----
 src/pages/Login/Login.tsx                     | 37 ++++++++----
 5 files changed, 89 insertions(+), 75 deletions(-)

diff --git a/src/Actions/registration.js b/src/Actions/registration.js
index e2b27c33..16742fea 100644
--- a/src/Actions/registration.js
+++ b/src/Actions/registration.js
@@ -279,7 +279,7 @@ export function registrationResetToApiScreen(resetStoredApiKey = false) {
 
 /**
  * Log out without removing the stored apikey and go back to password screen
- * @param resetPassword
+ * @param {boolean} resetStoredApiKey
  * @returns {function(*)}
  */
 export function registrationLogOut(resetStoredApiKey = true) {
diff --git a/src/Actions/share_invite_monetary_account_inquiries.js b/src/Actions/share_invite_monetary_account_inquiries.js
index b23fbd67..99c1e7c3 100644
--- a/src/Actions/share_invite_monetary_account_inquiries.js
+++ b/src/Actions/share_invite_monetary_account_inquiries.js
@@ -5,7 +5,6 @@ export const STORED_SHARE_INVITE_MONETARY_ACCOUNT_INQUIRIES = "BUNQDESKTOP_SHARE
 export function shareInviteBankInquiriesSetInfo(
     share_invite_monetary_account_inquiries,
     account_id,
-    BunqJSClient = false
 ) {
     return {
         type: "SHARE_INVITE_INQUIRIES_SET_INFO",
@@ -17,21 +16,20 @@ export function shareInviteBankInquiriesSetInfo(
 }
 
 export function loadStoredShareInviteBankInquiries() {
-    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
+    return async (dispatch) => {
+        const BunqDesktopClient = window.BunqDesktopClient;
 
-    return dispatch => {
         dispatch(shareInviteBankInquiriesLoading());
-        const BunqDesktopClient = window.BunqDesktopClient;
-        BunqDesktopClient.storeDecrypt(STORED_SHARE_INVITE_MONETARY_ACCOUNT_INQUIRIES)
-            .then(data => {
-                if (data && data.items) {
-                    dispatch(shareInviteBankInquiriesSetInfo(data.items, data.account_id));
-                }
-                dispatch(shareInviteBankInquiriesNotLoading());
-            })
-            .catch(error => {
-                dispatch(shareInviteBankInquiriesNotLoading());
-            });
+
+        const batchedActions = [];
+        try {
+            const data = await BunqDesktopClient.storeDecrypt(STORED_SHARE_INVITE_MONETARY_ACCOUNT_INQUIRIES);
+            if (data && data.items) {
+                batchedActions.push(shareInviteBankInquiriesSetInfo(data.items, data.account_id));
+            }
+        } finally {
+            dispatch(batchedActions.concat([shareInviteBankInquiriesNotLoading()]));
+        }
     };
 }
 
@@ -47,19 +45,18 @@ export function shareInviteMonetaryAccountInquiriesInfoUpdate(
     const failedMessage = window.t("We failed to load the share invite inquiries for this monetary account");
     const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
-    return dispatch => {
+    return async (dispatch) => {
         dispatch(shareInviteBankInquiriesLoading());
 
-        BunqJSClient.api.shareInviteMonetaryAccountInquiry
-            .list(user_id, account_id, options)
-            .then(shareInviteBankInquiries => {
-                dispatch(shareInviteBankInquiriesSetInfo(shareInviteBankInquiries, account_id, BunqJSClient));
-                dispatch(shareInviteBankInquiriesNotLoading());
-            })
-            .catch(error => {
-                dispatch(shareInviteBankInquiriesNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
-            });
+        const batchedActions = [];
+        try {
+            const shareInviteBankInquiries = await BunqJSClient.api.shareInviteMonetaryAccountInquiry.list(user_id, account_id, options);
+            batchedActions.push(shareInviteBankInquiriesSetInfo(shareInviteBankInquiries, account_id, BunqJSClient));
+        } catch (error) {
+            BunqErrorHandler(batchedActions, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([shareInviteBankInquiriesNotLoading()]));
+        }
     };
 }
 
diff --git a/src/Actions/share_invite_monetary_account_inquiry.js b/src/Actions/share_invite_monetary_account_inquiry.js
index c39c2247..a5a50776 100644
--- a/src/Actions/share_invite_monetary_account_inquiry.js
+++ b/src/Actions/share_invite_monetary_account_inquiry.js
@@ -12,27 +12,27 @@ export function shareInviteMonetaryAccountInquirySend(
 ) {
     const failedMessage = window.t("We received the following error while sending your connect request");
     const successMessage = window.t("Connect request was sent successfully!");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
-    return dispatch => {
+    return async (dispatch) => {
         dispatch(shareInviteMonetaryAccountInquiryLoading());
 
-        BunqJSClient.api.shareInviteMonetaryAccountInquiry
-            .post(userId, accountId, counterparty, shareDetail, shareStatus, {
+        const batchedActions = [];
+        try {
+            await BunqJSClient.api.shareInviteMonetaryAccountInquiry.post(userId, accountId, counterparty, shareDetail, shareStatus, {
                 share_type: "STANDARD",
                 ...shareOptions
-            })
-            .then(result => {
-                dispatch(snackbarActions.open({ message: successMessage }));
-
-                // update the payments, accounts and share list
-                dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(userId, accountId));
-                dispatch(shareInviteMonetaryAccountInquiryNotLoading());
-            })
-            .catch(error => {
-                dispatch(shareInviteMonetaryAccountInquiryNotLoading());
-                // FIXME
-                // BunqErrorHandler(dispatch, error, failedMessage);
             });
+
+            batchedActions.push(snackbarActions.open({ message: successMessage }));
+            // update the payments, accounts and share list
+            batchedActions.push(shareInviteMonetaryAccountInquiriesInfoUpdate(userId, accountId));
+        } catch (error) {
+            BunqErrorHandler(batchedActions, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([shareInviteMonetaryAccountInquiryNotLoading()]));
+
+        }
     };
 }
 
@@ -46,22 +46,20 @@ export function shareInviteMonetaryAccountInquiryChangeStatus(
     const successMessage = window.t("Connect request was updated successfully!");
     const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
-    return dispatch => {
+    return async (dispatch) => {
         dispatch(shareInviteMonetaryAccountInquiryLoading());
 
-        BunqJSClient.api.shareInviteMonetaryAccountInquiry
-            .putStatus(userId, accountId, shareInviteMonetaryAccountInquiryId, status)
-            .then(() => {
-                dispatch(snackbarActions.open({ message: successMessage }));
-
-                // update the payments, accounts and share list
-                dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(userId, accountId));
-                dispatch(shareInviteMonetaryAccountInquiryNotLoading());
-            })
-            .catch(error => {
-                dispatch(shareInviteMonetaryAccountInquiryNotLoading());
-                BunqErrorHandler(dispatch, error, failedMessage);
-            });
+        const batchedActions = [];
+        try {
+            await BunqJSClient.api.shareInviteMonetaryAccountInquiry.putStatus(userId, accountId, shareInviteMonetaryAccountInquiryId, status);
+            batchedActions.push(snackbarActions.open({ message: successMessage }));
+            // update the payments, accounts and share list
+            batchedActions.push(shareInviteMonetaryAccountInquiriesInfoUpdate(userId, accountId));
+        } catch (error) {
+            BunqErrorHandler(dispatch, error, failedMessage);
+        } finally {
+            dispatch(batchedActions.concat([shareInviteMonetaryAccountInquiryNotLoading()]))
+        }
     };
 }
 
diff --git a/src/components/Queue/QueueManager.tsx b/src/components/Queue/QueueManager.tsx
index a0dbaed4..65f3b44d 100644
--- a/src/components/Queue/QueueManager.tsx
+++ b/src/components/Queue/QueueManager.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { ipcRenderer } from "electron";
 import { translate } from "react-i18next";
 import { connect } from "react-redux";
+import { AppWindow } from "~app";
 
 import Payment from "~models/Payment";
 import BunqMeTab from "~models/BunqMeTab";
@@ -36,6 +37,8 @@ import { actions as snackbarActions } from "~store/snackbar";
 export const DEFAULT_EVENT_COUNT_LIMIT = 50;
 export const EVENT_TOTAL_LIMIT = 1000;
 
+declare let window: AppWindow;
+
 interface IProps {
     BunqJSClient: BunqJSClient;
 }
@@ -391,7 +394,7 @@ class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> &
     };
 
     paymentsUpdate = (user_id, account_id, olderId = false, eventCount = 200) => {
-        const { BunqJSClient } = this.props;
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
         const currentEventCount = eventCount > 200 ? 200 : eventCount;
         const nextEventCount = eventCount > 200 ? eventCount - 200 : 0;
@@ -445,7 +448,7 @@ class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> &
     };
 
     bunqMeTabsUpdate = (user_id, account_id, olderId = false, eventCount = 200) => {
-        const { BunqJSClient } = this.props;
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
         const currentEventCount = eventCount > 200 ? 200 : eventCount;
         const nextEventCount = eventCount > 200 ? eventCount - 200 : 0;
@@ -499,7 +502,7 @@ class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> &
     };
 
     requestResponsesUpdate = (user_id, account_id, olderId = false, eventCount = 200) => {
-        const { BunqJSClient } = this.props;
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
         const currentEventCount = eventCount > 200 ? 200 : eventCount;
         const nextEventCount = eventCount > 200 ? eventCount - 200 : 0;
@@ -554,8 +557,8 @@ class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> &
             });
     };
 
-    requestInquiriesUpdate = (user_id, account_id, olderId = false, eventCount = 200) => {
-        const { BunqJSClient } = this.props;
+    requestInquiriesUpdate = (user_id, account_id, olderId: false | number = false, eventCount = 200) => {
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
         const currentEventCount = eventCount > 200 ? 200 : eventCount;
         const nextEventCount = eventCount > 200 ? eventCount - 200 : 0;
@@ -611,7 +614,7 @@ class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> &
     };
 
     requestInquiryBatchesUpdate = (user_id, account_id, olderId = false, eventCount = 200) => {
-        const { BunqJSClient } = this.props;
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
         const currentEventCount = eventCount > 200 ? 200 : eventCount;
         const nextEventCount = eventCount > 200 ? eventCount - 200 : 0;
@@ -670,7 +673,7 @@ class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> &
     };
 
     masterCardActionsUpdate = (user_id, account_id, olderId = false, eventCount = 200) => {
-        const { BunqJSClient } = this.props;
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
         const currentEventCount = eventCount > 200 ? 200 : eventCount;
         const nextEventCount = eventCount > 200 ? eventCount - 200 : 0;
@@ -726,7 +729,7 @@ class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> &
     };
 
     shareInviteBankInquiriesUpdate = (user_id, account_id, olderId: boolean | number = false, eventCount = 200) => {
-        const { BunqJSClient } = this.props;
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
         if (olderId !== false) this.props.queueIncreaseRequestCounter();
 
@@ -778,7 +781,7 @@ class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> &
     };
 
     shareInviteMonetaryAccountResponsesUpdate = (user_id, eventCount = 200) => {
-        const { BunqJSClient } = this.props;
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
         BunqJSClient.api.shareInviteMonetaryAccountResponse
             .list(user_id, {
@@ -854,7 +857,6 @@ const mapDispatchToProps = (dispatch: AppDispatch, ownProps: IProps) => {
                 bunqMeTabs,
                 account_id: accountId,
                 resetOldItems: false,
-                BunqJSClient
             })),
         masterCardActionsSetInfo: (masterCardActions, accountId) =>
             dispatch(masterCardActionsSetInfo(masterCardActions, accountId, false, BunqJSClient)),
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index a02c76b9..5743ee40 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -20,17 +20,21 @@ import InputLabel from "@material-ui/core/InputLabel";
 
 import BuildIcon from "@material-ui/icons/Build";
 import KeyIcon from "@material-ui/icons/VpnKey";
+import { AppWindow } from "~app";
 
 import QRSvg from "~components/QR/QRSvg";
 import TranslateTypography from "~components/TranslationHelpers/Typography";
 import TranslateButton from "~components/TranslationHelpers/Button";
 import NavLink from "~components/Routing/NavLink";
+import { AppDispatch, ReduxState } from "~store/index";
 import OAuthManagement from "./OAuthManagement";
 import SideOptions from "./SideOptions";
 
 import { registrationLogOut, registrationLogin } from "~actions/registration";
 import BunqErrorHandler from "~functions/BunqErrorHandler";
 
+declare let window: AppWindow;
+
 const styles = {
     card: {
         width: 250
@@ -105,7 +109,15 @@ const styles = {
     }
 };
 
-class Login extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class Login extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -227,10 +239,11 @@ class Login extends React.Component {
 
     // create a new registration and display the qr code
     displayQrCode = () => {
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
         if (this.state.loadingQrCode === false) {
             this.setState({ loadingQrCode: true });
 
-            this.props.BunqJSClient.createCredentials()
+            BunqJSClient.createCredentials()
                 .then(({ uuid, status, qr_base64 }) => {
                     this.setState({
                         loadingQrCode: false,
@@ -252,8 +265,9 @@ class Login extends React.Component {
 
     // create a new sandbox user
     createSandboxUser = () => {
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
         this.setState({ loadingBunqUser: true });
-        this.props.BunqJSClient.api.sandboxUser
+        BunqJSClient.api.sandboxUser
             .post()
             .then(apiKey => {
                 // set the api key and update state
@@ -275,10 +289,11 @@ class Login extends React.Component {
 
     // check if the qr code has been scanned yet
     checkForScanEvent = () => {
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
         this.checkerInterval = setInterval(() => {
             // only continue if requestUuid isn't set yet and the qr code is open
             if (this.state.requestUuid !== false && this.state.tabIndex === 0) {
-                this.props.BunqJSClient.checkCredentialStatus(this.state.requestUuid)
+                BunqJSClient.checkCredentialStatus(this.state.requestUuid)
                     .then(result => {
                         if (result.status === "ACCEPTED") {
                             this.setState(
@@ -364,7 +379,7 @@ class Login extends React.Component {
     };
 
     render() {
-        const { t, status_message, userLoading, usersLoading, BunqJSClient } = this.props;
+        const { t, status_message, userLoading, usersLoading } = this.props;
 
         if (this.props.derivedPassword === false && this.props.registrationLoading === false) {
             return <Redirect to="/password" />;
@@ -585,7 +600,7 @@ class Login extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         status_message: state.application.status_message,
 
@@ -603,16 +618,18 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
-        // clear api key from bunqjsclient and bunqdesktop
         logOut: () => dispatch(registrationLogOut()),
 
         registrationLogin: (apiKey, deviceName, environment, permittedIps) =>
             dispatch(registrationLogin(apiKey, deviceName, environment, permittedIps)),
 
-        handleBunqError: error => BunqErrorHandler(dispatch, error)
+        handleBunqError: (error) => {
+            const batchedActions = [];
+            BunqErrorHandler(batchedActions, error);
+            dispatch(batchedActions);
+        }
     };
 };
 

From 58c7f297e8cb326c0c33ca8818116f138e9158b3 Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 13:55:07 +0100
Subject: [PATCH 07/26] fix: paths to locales, json files are not located by
 babel module resolver

---
 src/components/i18n.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/i18n.tsx b/src/components/i18n.tsx
index beb5a56c..725c99ec 100644
--- a/src/components/i18n.tsx
+++ b/src/components/i18n.tsx
@@ -12,7 +12,7 @@ import path from "~importwrappers/path";
  */
 const addLocaleKey = async data => {
     // get the current localeData
-    const localeData = require("~locales/en.json");
+    const localeData = require("../locales/en.json");
 
     // go through all the missing keys for this language
     Object.keys(data).forEach(missingKey => {
@@ -52,7 +52,8 @@ const loadLocales = (url, options, callback, data) => {
 
     if (action === "LOAD") {
         try {
-            const locale = require("~locales/" + language + ".json");
+            console.log(language);
+            const locale = require("../locales/" + language + ".json");
             callback(locale, { status: "200" });
         } catch (e) {
             console.error(e);

From fd43392da17e1e67b695063dbc43f7e62c804176 Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 13:57:28 +0100
Subject: [PATCH 08/26] fix: stop retrieving BunqJSClient through props

---
 src/components/AttachmentImage/AttachmentImage.tsx | 3 ++-
 src/components/FileUpload/UploadFullscreen.tsx     | 3 ++-
 src/pages/Exports.tsx                              | 3 ++-
 src/pages/Login/OAuthManagement.tsx                | 6 ++++--
 src/pages/ScheduledPayments/ScheduledPayments.tsx  | 5 +++--
 5 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/AttachmentImage/AttachmentImage.tsx b/src/components/AttachmentImage/AttachmentImage.tsx
index 95983946..627f5803 100644
--- a/src/components/AttachmentImage/AttachmentImage.tsx
+++ b/src/components/AttachmentImage/AttachmentImage.tsx
@@ -70,6 +70,7 @@ class AttachmentImage extends React.PureComponent<any> {
 
     loadImage = async () => {
         const indexedDb = window.BunqDesktopClient.ImageIndexedDb;
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
         const storageKey = `image_${this.props.imageUUID}`;
         const base64UrlStored = await indexedDb.get(storageKey);
@@ -85,7 +86,7 @@ class AttachmentImage extends React.PureComponent<any> {
 
             try {
                 // get raw image contents
-                const base64Url = await this.props.BunqJSClient.api.attachmentContent.get(this.props.imageUUID);
+                const base64Url = await BunqJSClient.api.attachmentContent.get(this.props.imageUUID);
 
                 // set the url first
                 if (this._isMounted) {
diff --git a/src/components/FileUpload/UploadFullscreen.tsx b/src/components/FileUpload/UploadFullscreen.tsx
index 95c8d8c5..aa965bba 100644
--- a/src/components/FileUpload/UploadFullscreen.tsx
+++ b/src/components/FileUpload/UploadFullscreen.tsx
@@ -71,6 +71,7 @@ class UploadFullscreen extends React.Component<ReturnType<typeof mapStateToProps
     };
 
     startUpload = () => {
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
         const file = this.state.file;
 
         // close the fullscreen page on upload
@@ -92,7 +93,7 @@ class UploadFullscreen extends React.Component<ReturnType<typeof mapStateToProps
             // transform array buffer into regular buffer
             const fileBuffer = Buffer.from(fileArrayBuffer);
 
-            this.props.BunqJSClient.api.attachmentPublic
+            BunqJSClient.api.attachmentPublic
                 .post(fileBuffer, file.type)
                 .then(response => {
                     this.props.onComplete(response);
diff --git a/src/pages/Exports.tsx b/src/pages/Exports.tsx
index 34070843..c2e305ee 100644
--- a/src/pages/Exports.tsx
+++ b/src/pages/Exports.tsx
@@ -230,6 +230,7 @@ class Exports extends React.Component<any> {
     };
 
     loadExportContent = exportInfo => event => {
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
         if (!this.state.exportContentLoading) {
             this.setState({ exportContentLoading: true });
 
@@ -249,7 +250,7 @@ class Exports extends React.Component<any> {
 
             const failedMessage = this.props.t("We failed to load the export content for this monetary account");
 
-            this.props.BunqJSClient.api.customerStatementExportContent
+            BunqJSClient.api.customerStatementExportContent
                 .list(this.props.user.id, this.props.selectedAccountId, exportInfo.id)
                 .then(exportContent => {
                     // create a new file reader
diff --git a/src/pages/Login/OAuthManagement.tsx b/src/pages/Login/OAuthManagement.tsx
index 255d37e5..19aabfc0 100644
--- a/src/pages/Login/OAuthManagement.tsx
+++ b/src/pages/Login/OAuthManagement.tsx
@@ -112,9 +112,10 @@ class OAuthManagement extends React.Component<any> {
      * @param event
      */
     openBunqConsentScreen = event => {
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
         const sandboxMode = this.props.sandboxMode;
 
-        const targetUrl = this.props.BunqJSClient.formatOAuthAuthorizationRequestUrl(
+        const targetUrl = BunqJSClient.formatOAuthAuthorizationRequestUrl(
             sandboxMode ? this.props.sandboxClientId : this.props.clientId,
             "http://localhost:1234",
             false,
@@ -137,6 +138,7 @@ class OAuthManagement extends React.Component<any> {
      * @param code
      */
     exchangeBunqOAuthToken = code => {
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
         const { sandboxMode, clientId, clientSecret, sandboxClientId, sandboxClientSecret } = this.props;
 
         const requestClientId = sandboxMode ? sandboxClientId : clientId;
@@ -154,7 +156,7 @@ class OAuthManagement extends React.Component<any> {
             Logger.debug(`clientSecret: ${requestClientSecret.substring(0, 8)}`);
             Logger.debug(`code: ${code.substring(0, 8)}`);
         } catch (ex) {}
-        this.props.BunqJSClient.exchangeOAuthToken(
+        BunqJSClient.exchangeOAuthToken(
             requestClientId,
             requestClientSecret,
             "http://localhost:1234",
diff --git a/src/pages/ScheduledPayments/ScheduledPayments.tsx b/src/pages/ScheduledPayments/ScheduledPayments.tsx
index cd795907..4313ad06 100644
--- a/src/pages/ScheduledPayments/ScheduledPayments.tsx
+++ b/src/pages/ScheduledPayments/ScheduledPayments.tsx
@@ -63,9 +63,10 @@ class ScheduledPayments extends React.Component<any> {
         this.props.scheduledPaymentsInfoUpdate(userId, accountId);
     };
     deleteScheduledPayment = scheduledPaymentInfo => event => {
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
         if (this.state.deleteLoading === false) {
             this.setState({ deleteLoading: true });
-            this.props.BunqJSClient.api.schedulePayment
+            BunqJSClient.api.schedulePayment
                 .delete(this.props.user.id, this.props.accountsAccountId, scheduledPaymentInfo.id)
                 .then(result => {
                     this.updateScheduledPayments();
@@ -74,7 +75,7 @@ class ScheduledPayments extends React.Component<any> {
                 .catch(err => {
                     if (err.response && err.response.status === 404) {
                         // likely a batch payment
-                        this.props.BunqJSClient.api.schedulePaymentBatch
+                        BunqJSClient.api.schedulePaymentBatch
                             .delete(this.props.user.id, this.props.accountsAccountId, scheduledPaymentInfo.id)
                             .then(result => {
                                 this.updateScheduledPayments();

From 1e8aeb9553bf4d390438ed3f983debbcb95b296b Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 13:58:16 +0100
Subject: [PATCH 09/26] chore: remove redundant log from i18n.tsx

---
 src/components/i18n.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/i18n.tsx b/src/components/i18n.tsx
index 725c99ec..956f2e4a 100644
--- a/src/components/i18n.tsx
+++ b/src/components/i18n.tsx
@@ -52,7 +52,6 @@ const loadLocales = (url, options, callback, data) => {
 
     if (action === "LOAD") {
         try {
-            console.log(language);
             const locale = require("../locales/" + language + ".json");
             callback(locale, { status: "200" });
         } catch (e) {

From 0e159a5f3f10378de7d6eacf51d880efd8c6dbdb Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 14:30:39 +0100
Subject: [PATCH 10/26] refactor: TypeScript added to mapStateToProps and
 mapDispatchToProps

---
 .../AccountAvatarCircularProgress.tsx         |  3 +-
 src/components/AccountList/AccountList.tsx    |  2 +-
 src/components/Categories/CategoryEditor.tsx  |  7 +--
 .../FilterComponents/AccountSelection.tsx     |  2 +-
 .../FilterComponents/AmountFilter.tsx         |  2 +-
 .../FilterComponents/CardSelection.tsx        |  7 +--
 .../FilterComponents/CategorySelection.tsx    |  2 +-
 .../FilterComponents/ClearFilter.tsx          |  2 +-
 .../FilterComponents/SearchFilter.tsx         |  2 +-
 .../FormFields/AccountSelectorDialog.tsx      |  5 +--
 src/components/FormFields/TargetSelection.tsx | 15 +++++--
 src/components/Header.tsx                     | 15 +++++--
 ...reInviteMonetaryAccountInquiryListItem.tsx | 18 +++++---
 ...eInviteMonetaryAccountResponseListItem.tsx | 17 ++++++--
 src/components/MainDialog.tsx                 | 21 ++++++---
 src/components/MainSnackbar.tsx               | 21 ++++++---
 src/components/NetworkStatusChecker.tsx       | 20 ++++++---
 src/components/NoteTexts/NoteTextForm.tsx     | 15 +++++--
 .../PDFExportHelper/PDFExportHelper.tsx       | 16 ++++---
 src/components/QR/AccountQRCode.tsx           | 18 ++++++--
 src/components/QR/AccountQRFullscreen.tsx     | 16 +++++--
 src/components/Queue/QueueHeaderIcon.tsx      | 15 +++++--
 src/components/Queue/QueueSidebarListItem.tsx | 15 +++++--
 .../ReduxForm/Fields/renderAccountsPicker.tsx |  8 +++-
 .../SavingsGoalListItemWrapper.tsx            |  8 +++-
 .../SavingsGoals/SavingsGoalsList.tsx         |  8 +++-
 src/components/Sidebar.tsx                    | 17 ++++++--
 src/components/SwitchKeysMenu.tsx             | 15 +++++--
 src/pages/AccountInfo.tsx                     | 15 +++++--
 src/pages/AddAccount.tsx                      | 18 +++++---
 src/pages/ApplicationInfo.tsx                 | 16 ++++---
 src/pages/BunqMePersonal/BunqMePersonal.tsx   | 16 +++++--
 src/pages/BunqMeTab/BunqMeTab.tsx             | 16 ++++---
 src/pages/Cards/Cards.tsx                     | 15 +++++--
 src/pages/Cards/CvcCodeListItem.tsx           | 15 +++++--
 .../Cards/VirtualAccountNumbersDialog.tsx     | 13 +++++-
 .../CategoryDashboard/CategoryDashboard.tsx   | 15 +++++--
 src/pages/Connect/Connect.tsx                 | 18 +++++---
 src/pages/Connect/ConnectListItem.tsx         | 16 +++++--
 src/pages/Contacts/Contacts.tsx               | 16 ++++---
 src/pages/Dashboard/AddMoneyButton.tsx        | 18 +++++---
 src/pages/Dashboard/Dashboard.tsx             | 18 ++++++--
 src/pages/DebugPage.tsx                       | 15 +++++--
 src/pages/Disclaimer.tsx                      | 17 ++++++--
 src/pages/Exports.tsx                         | 28 +++++++-----
 src/pages/Login/OAuthManagement.tsx           | 16 ++++---
 src/pages/LoginPassword.tsx                   | 15 +++++--
 src/pages/MasterCardActionInfo.tsx            | 16 ++++---
 src/pages/Pay/ConfirmationDialog.tsx          | 13 +++++-
 src/pages/Pay/Pay.tsx                         | 18 +++++---
 src/pages/PaymentInfo.tsx                     | 16 ++++---
 src/pages/PendingPayments/PendingPayments.tsx | 27 +++++++++---
 src/pages/Profile/Profile.tsx                 | 22 +++++++---
 src/pages/RequestInquiry/RequestInquiry.tsx   | 16 ++++---
 src/pages/RequestInquiryInfo.tsx              | 16 ++++---
 .../RequestResponseInfo.tsx                   | 16 ++++---
 src/pages/RuleDashboard/RuleDashboard.tsx     | 22 ++++++----
 src/pages/RulePage/RulePage.tsx               | 19 +++++---
 src/pages/SavingsGoalPage/SavingsGoalPage.tsx | 15 +++++--
 .../renderAmountFieldCustom.tsx               |  8 +++-
 src/pages/SavingsGoals/SavingsGoals.tsx       | 15 +++++--
 .../ScheduledPayments/ScheduledPayments.tsx   | 32 ++++++++------
 .../ScheduledPaymentsEditDialog.tsx           | 18 +++++---
 src/pages/Settings/EditPasswordForm.tsx       | 15 +++++--
 src/pages/Settings/Settings.tsx               | 18 +++++---
 src/pages/Stats/Stats.tsx                     | 43 +++++++++++--------
 src/pages/SwitchApiKeys.tsx                   | 15 +++++--
 67 files changed, 717 insertions(+), 291 deletions(-)

diff --git a/src/components/AccountList/AccountAvatarCircularProgress.tsx b/src/components/AccountList/AccountAvatarCircularProgress.tsx
index d1533906..0d1b2978 100644
--- a/src/components/AccountList/AccountAvatarCircularProgress.tsx
+++ b/src/components/AccountList/AccountAvatarCircularProgress.tsx
@@ -1,6 +1,7 @@
 import React, { CSSProperties } from "react";
 import { connect } from "react-redux";
 import CircularProgress from "@material-ui/core/CircularProgress";
+import { ReduxState } from "~store/index";
 
 const styles = {
     overlayCircular: {
@@ -74,7 +75,7 @@ const AccountAvatarCircularProgress = ({ account, theme, selected = false, style
     );
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         theme: state.options.theme,
     };
diff --git a/src/components/AccountList/AccountList.tsx b/src/components/AccountList/AccountList.tsx
index 6d07cba7..dfe396be 100644
--- a/src/components/AccountList/AccountList.tsx
+++ b/src/components/AccountList/AccountList.tsx
@@ -52,7 +52,7 @@ interface IState {
 }
 
 interface IProps {
-    t: AppWindow['t'];
+    t: AppWindow["t"];
     BunqJSClient: BunqJSClient;
 }
 
diff --git a/src/components/Categories/CategoryEditor.tsx b/src/components/Categories/CategoryEditor.tsx
index f0b61499..af96a24e 100644
--- a/src/components/Categories/CategoryEditor.tsx
+++ b/src/components/Categories/CategoryEditor.tsx
@@ -5,6 +5,7 @@ import Chip from "@material-ui/core/Chip";
 import Grid from "@material-ui/core/Grid";
 import Avatar from "@material-ui/core/Avatar";
 import TextField from "@material-ui/core/TextField";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import CustomIcon from "../CustomIcon";
 import IconPicker from "../FormFields/IconPicker";
@@ -48,7 +49,7 @@ export interface IProps {
     t: Function;
 }
 
-class CategoryEditor extends React.Component<IProps> {
+class CategoryEditor extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
     static defaultProps = {
         style: {},
     };
@@ -226,7 +227,7 @@ class CategoryEditor extends React.Component<IProps> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         categories: state.categories.categories,
         categories_last_udate: state.categories.last_update,
@@ -234,7 +235,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         setCategory: (categoryId, label, color, icon, priority) => dispatch(categoriesActions.setCategory({ id: categoryId, label, color, icon, priority })),
     };
diff --git a/src/components/FilterComponents/AccountSelection.tsx b/src/components/FilterComponents/AccountSelection.tsx
index acac237d..7eb3ce33 100644
--- a/src/components/FilterComponents/AccountSelection.tsx
+++ b/src/components/FilterComponents/AccountSelection.tsx
@@ -33,7 +33,7 @@ const styles = {
 
 interface IProps {
   BunqJSClient: BunqJSClient;
-  t: AppWindow['t'];
+  t: AppWindow["t"];
 }
 
 interface IState {
diff --git a/src/components/FilterComponents/AmountFilter.tsx b/src/components/FilterComponents/AmountFilter.tsx
index 004674ce..d73b2dc3 100644
--- a/src/components/FilterComponents/AmountFilter.tsx
+++ b/src/components/FilterComponents/AmountFilter.tsx
@@ -12,7 +12,7 @@ import { AppDispatch, ReduxState } from "~store/index";
 
 interface IProps {
     style: CSSProperties;
-    t: AppWindow['t'];
+    t: AppWindow["t"];
 }
 
 interface IState {
diff --git a/src/components/FilterComponents/CardSelection.tsx b/src/components/FilterComponents/CardSelection.tsx
index fbc2672c..1387d12e 100644
--- a/src/components/FilterComponents/CardSelection.tsx
+++ b/src/components/FilterComponents/CardSelection.tsx
@@ -20,6 +20,7 @@ import { AppWindow } from "~app";
 import { getCardTypeImage } from "~pages/Cards/CardListItem";
 import { getCardDescription } from "~functions/Utils";
 import { cardsUpdate } from "~store/cards/thunks";
+import { AppDispatch, ReduxState } from "~store/index";
 
 const styles: any = {
     listItem: {
@@ -52,7 +53,7 @@ interface IState {
 }
 
 interface IProps {
-    t: AppWindow['t'];
+    t: AppWindow["t"];
 }
 
 class CardSelection extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -172,7 +173,7 @@ class CardSelection extends React.Component<ReturnType<typeof mapStateToProps> &
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
 
@@ -184,7 +185,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         addCardIdFilter: cardId => dispatch(addCardIdFilter(cardId)),
         removeCardIdFilter: index => dispatch(removeCardIdFilter(index)),
diff --git a/src/components/FilterComponents/CategorySelection.tsx b/src/components/FilterComponents/CategorySelection.tsx
index 455d2a99..06632f0f 100644
--- a/src/components/FilterComponents/CategorySelection.tsx
+++ b/src/components/FilterComponents/CategorySelection.tsx
@@ -36,7 +36,7 @@ interface IState {
 }
 
 interface IProps {
-    t: AppWindow['t'];
+    t: AppWindow["t"];
 }
 
 class CategorySelection extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/components/FilterComponents/ClearFilter.tsx b/src/components/FilterComponents/ClearFilter.tsx
index fdf2262c..6982b015 100644
--- a/src/components/FilterComponents/ClearFilter.tsx
+++ b/src/components/FilterComponents/ClearFilter.tsx
@@ -14,7 +14,7 @@ interface IState {
 }
 
 interface IProps {
-    t: AppWindow['t'];
+    t: AppWindow["t"];
 }
 
 class ClearFilter extends React.PureComponent<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/components/FilterComponents/SearchFilter.tsx b/src/components/FilterComponents/SearchFilter.tsx
index a726cf43..ced0d608 100644
--- a/src/components/FilterComponents/SearchFilter.tsx
+++ b/src/components/FilterComponents/SearchFilter.tsx
@@ -14,7 +14,7 @@ interface IState {
 }
 
 interface IProps {
-    t: AppWindow['t'];
+    t: AppWindow["t"];
     style: CSSProperties;
 }
 
diff --git a/src/components/FormFields/AccountSelectorDialog.tsx b/src/components/FormFields/AccountSelectorDialog.tsx
index 3edcac11..5c458cbd 100644
--- a/src/components/FormFields/AccountSelectorDialog.tsx
+++ b/src/components/FormFields/AccountSelectorDialog.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
-import PropTypes from "prop-types";
 import Avatar from "@material-ui/core/Avatar";
 import FormControl from "@material-ui/core/FormControl";
 import List from "@material-ui/core/List";
@@ -53,10 +52,10 @@ const AccountItem = ({ account, onClick, hideBalance, shareInviteMonetaryAccount
     return (
         <ListItem button onClick={onClick}>
             <Avatar style={styles.bigAvatar}>
-                <LazyAttachmentImage
+                {account.avatar?.image[0]?.attachment_public_uuid && <LazyAttachmentImage
                     height={50}
                     imageUUID={account.avatar.image[0].attachment_public_uuid}
-                />
+                />}
             </Avatar>
             <ListItemText primary={account.description} secondary={hideBalance ? "" : formattedBalance} />
         </ListItem>
diff --git a/src/components/FormFields/TargetSelection.tsx b/src/components/FormFields/TargetSelection.tsx
index fc7d5cf5..e557bf33 100644
--- a/src/components/FormFields/TargetSelection.tsx
+++ b/src/components/FormFields/TargetSelection.tsx
@@ -10,6 +10,7 @@ import AccountBalanceIcon from "@material-ui/icons/AccountBalance";
 import CompareArrowsIcon from "@material-ui/icons/CompareArrows";
 import PersonIcon from "@material-ui/icons/Person";
 import ContactsIcon from "@material-ui/icons/Contacts";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import NavLink from "../Routing/NavLink";
 import InputSuggestions from "./InputSuggestions";
@@ -34,12 +35,18 @@ const styles = {
     }
 };
 
-class TargetSelection extends React.Component<any> {
+interface IState {
+}
+
+interface IProps {
+}
+
+class TargetSelection extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
     static defaultProps = {
         disabledTypes: []
     };
 
-    state: any;
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -290,7 +297,7 @@ class TargetSelection extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         contacts: state.contacts.contacts,
         contactsLoading: state.contacts.loading,
@@ -299,7 +306,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message }))
     };
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index f92c396a..df361736 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -5,6 +5,7 @@ import Hidden from "@material-ui/core/Hidden";
 
 import MenuIcon from "@material-ui/icons/Menu";
 import CloseIcon from "@material-ui/icons/Close";
+import { AppDispatch, ReduxState } from "~store/index";
 import RestoreIcon from "./CustomSVG/Restore";
 import MaximizeIcon from "./CustomSVG/Maximize";
 import MinimizeIcon from "./CustomSVG/Minimize";
@@ -71,8 +72,14 @@ const styles: any = {
     }
 };
 
-class Header extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class Header extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     mainWindow: any;
 
@@ -181,7 +188,7 @@ class Header extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         stickyMenu: state.options.sticky_menu,
         nativeFrame: state.options.native_frame,
@@ -193,7 +200,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         // opens the options drawer on the left
         toggleSidebar: () => dispatch(toggleSidebar())
diff --git a/src/components/ListItems/ShareInviteMonetaryAccountInquiryListItem.tsx b/src/components/ListItems/ShareInviteMonetaryAccountInquiryListItem.tsx
index 8f2ff868..a5e5e103 100644
--- a/src/components/ListItems/ShareInviteMonetaryAccountInquiryListItem.tsx
+++ b/src/components/ListItems/ShareInviteMonetaryAccountInquiryListItem.tsx
@@ -7,6 +7,7 @@ import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import Avatar from "@material-ui/core/Avatar";
 import Divider from "@material-ui/core/Divider";
 import Collapse from "@material-ui/core/Collapse";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
 import TranslateButton from "../TranslationHelpers/Button";
@@ -29,7 +30,15 @@ const styles = {
     }
 };
 
-class ShareInviteMonetaryAccountInquiryListItem extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class ShareInviteMonetaryAccountInquiryListItem extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -138,15 +147,14 @@ ShareInviteMonetaryAccountInquiryListItem.defaultProps = {
     minimalDisplay: false
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
-        accountsSelectedId: state.accounts.selected_account
+        accountsSelectedId: state.accounts.selectedAccount
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         shareInviteMonetaryAccountInquiriesInfoUpdate: userId =>
             dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(userId))
diff --git a/src/components/ListItems/ShareInviteMonetaryAccountResponseListItem.tsx b/src/components/ListItems/ShareInviteMonetaryAccountResponseListItem.tsx
index ea61fc0c..8fc93adc 100644
--- a/src/components/ListItems/ShareInviteMonetaryAccountResponseListItem.tsx
+++ b/src/components/ListItems/ShareInviteMonetaryAccountResponseListItem.tsx
@@ -7,6 +7,7 @@ import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import Avatar from "@material-ui/core/Avatar";
 import Divider from "@material-ui/core/Divider";
 import Collapse from "@material-ui/core/Collapse";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
 import TranslateButton from "../TranslationHelpers/Button";
@@ -29,7 +30,15 @@ const styles = {
     }
 };
 
-class ShareInviteMonetaryAccountResponseListItem extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class ShareInviteMonetaryAccountResponseListItem extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -167,14 +176,14 @@ ShareInviteMonetaryAccountResponseListItem.defaultProps = {
     minimalDisplay: false
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
-        accountsSelectedId: state.accounts.selected_account
+        accountsSelectedId: state.accounts.selectedAccount
     };
 };
 
-const mapDispatchToProps = (dispatch) => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         shareInviteMonetaryAccountResponsesInfoUpdate: userId =>
             dispatch(shareInviteMonetaryAccountResponsesInfoUpdate(userId))
diff --git a/src/components/MainDialog.tsx b/src/components/MainDialog.tsx
index c8efa25a..5965be93 100644
--- a/src/components/MainDialog.tsx
+++ b/src/components/MainDialog.tsx
@@ -7,6 +7,7 @@ import DialogContentText from "@material-ui/core/DialogContentText";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import Dialog from "@material-ui/core/Dialog";
 import Slide from "@material-ui/core/Slide";
+import { AppDispatch, ReduxState } from "~store/index";
 import TranslateButton from "./TranslationHelpers/Button";
 
 const Transition = props => <Slide direction="left" {...props} />;
@@ -14,7 +15,15 @@ const Transition = props => <Slide direction="left" {...props} />;
 // redux actions
 import { closeModal } from "~actions/modal";
 
-class MainDialog extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class MainDialog extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -44,15 +53,15 @@ class MainDialog extends React.Component {
     }
 }
 
-const mapStateToProps = store => {
+const mapStateToProps = (state: ReduxState) => {
     return {
-        modalText: store.modal.message,
-        modalTitle: store.modal.title,
-        modalOpen: store.modal.modalOpen
+        modalText: state.modal.message,
+        modalTitle: state.modal.title,
+        modalOpen: state.modal.modalOpen
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         closeModal: () => dispatch(closeModal())
     };
diff --git a/src/components/MainSnackbar.tsx b/src/components/MainSnackbar.tsx
index bcf03dee..f34651f9 100644
--- a/src/components/MainSnackbar.tsx
+++ b/src/components/MainSnackbar.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import Snackbar from "@material-ui/core/Snackbar";
 import Slide from "@material-ui/core/Slide";
+import { AppDispatch, ReduxState } from "~store/index";
 
 const Transition = props => <Slide direction={"down"} {...props} />;
 
@@ -14,8 +15,14 @@ const styles: any = {
     }
 };
 
-class MainSnackbar extends React.PureComponent<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class MainSnackbar extends React.PureComponent<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -43,15 +50,15 @@ class MainSnackbar extends React.PureComponent<any> {
     }
 }
 
-const mapStateToProps = store => {
+const mapStateToProps = (state: ReduxState) => {
     return {
-        snackbarMessage: store.snackbar.message,
-        snackbarDuration: store.snackbar.duration,
-        snackbarOpen: store.snackbar.snackbarOpen
+        snackbarMessage: state.snackbar.message,
+        snackbarDuration: state.snackbar.duration,
+        snackbarOpen: state.snackbar.snackbarOpen
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         closeSnackbar: () => dispatch(snackbarActions.close())
     };
diff --git a/src/components/NetworkStatusChecker.tsx b/src/components/NetworkStatusChecker.tsx
index 7c75822e..7063c67e 100644
--- a/src/components/NetworkStatusChecker.tsx
+++ b/src/components/NetworkStatusChecker.tsx
@@ -7,8 +7,10 @@ import IconButton from "@material-ui/core/IconButton";
 import Slide from "@material-ui/core/Slide";
 
 import RefreshIcon from "@material-ui/icons/Refresh";
+import { AppWindow } from "~app";
 
 import { actions as applicationActions } from "~store/application";
+import { AppDispatch, ReduxState } from "~store/index";
 
 const Transition = props => <Slide direction={"down"} {...props} />;
 
@@ -18,8 +20,16 @@ const styles: any = {
     }
 };
 
-class NetworkStatusChecker extends React.PureComponent<any> {
-    state: any;
+interface IState {
+    loading: boolean;
+}
+
+interface IProps {
+    t: AppWindow["t"];
+}
+
+class NetworkStatusChecker extends React.PureComponent<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -90,13 +100,13 @@ class NetworkStatusChecker extends React.PureComponent<any> {
     }
 }
 
-const mapStateToProps = store => {
+const mapStateToProps = (state: ReduxState) => {
     return {
-        online: store.application.online
+        online: state.application.online
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         applicationSetOnline: () => dispatch(applicationActions.setOnline()),
         applicationSetOffline: () => dispatch(applicationActions.setOffline())
diff --git a/src/components/NoteTexts/NoteTextForm.tsx b/src/components/NoteTexts/NoteTextForm.tsx
index 33c8e13d..8effdd6d 100644
--- a/src/components/NoteTexts/NoteTextForm.tsx
+++ b/src/components/NoteTexts/NoteTextForm.tsx
@@ -6,6 +6,7 @@ import List from "@material-ui/core/List";
 import Paper from "@material-ui/core/Paper";
 import Button from "@material-ui/core/Button";
 import TextField from "@material-ui/core/TextField";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import TranslateButton from "../TranslationHelpers/Button";
 import NoteTextItem from "./NoteTextItem";
@@ -30,7 +31,15 @@ const styles = {
     }
 };
 
-class NoteTextForm extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class NoteTextForm extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -157,7 +166,7 @@ class NoteTextForm extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
 
@@ -167,7 +176,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         noteTextsUpdate: (event_type, user_id, account_id, event_id) =>
             dispatch(noteTextsUpdate(event_type, user_id, account_id, event_id)),
diff --git a/src/components/PDFExportHelper/PDFExportHelper.tsx b/src/components/PDFExportHelper/PDFExportHelper.tsx
index e7345bc4..ce3aa8d4 100644
--- a/src/components/PDFExportHelper/PDFExportHelper.tsx
+++ b/src/components/PDFExportHelper/PDFExportHelper.tsx
@@ -5,6 +5,7 @@ import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import Divider from "@material-ui/core/Divider";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import bunqTransparantLogo from "./Base64BunqLogo";
 import { formatIban } from "~functions/Utils";
@@ -23,8 +24,14 @@ const styles = {
     }
 };
 
-class PDFExportHelper extends React.PureComponent<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class PDFExportHelper extends React.PureComponent<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -188,7 +195,7 @@ class PDFExportHelper extends React.PureComponent<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         theme: state.options.theme,
 
@@ -196,8 +203,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
 
diff --git a/src/components/QR/AccountQRCode.tsx b/src/components/QR/AccountQRCode.tsx
index 5a256bcf..4e9c7737 100644
--- a/src/components/QR/AccountQRCode.tsx
+++ b/src/components/QR/AccountQRCode.tsx
@@ -1,5 +1,6 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { connect } from "react-redux";
+import { ReduxState } from "~store/index";
 import QRCode from "./QRCode";
 
 const styles = {
@@ -10,7 +11,16 @@ const styles = {
     }
 };
 
-class AccountQRCode extends React.Component {
+interface IState {
+}
+
+interface IProps {
+    style: CSSProperties;
+}
+
+class AccountQRCode extends React.Component<ReturnType<typeof mapStateToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -50,10 +60,10 @@ AccountQRCode.defaultProps = {
     size: 195
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         accounts: state.accounts.accounts,
-        selectedAccount: state.accounts.selected_account
+        selectedAccount: state.accounts.selectedAccount
     };
 };
 
diff --git a/src/components/QR/AccountQRFullscreen.tsx b/src/components/QR/AccountQRFullscreen.tsx
index 9386eb52..953cc3f0 100644
--- a/src/components/QR/AccountQRFullscreen.tsx
+++ b/src/components/QR/AccountQRFullscreen.tsx
@@ -7,6 +7,7 @@ import Slide from "@material-ui/core/Slide";
 import ListItemText from "@material-ui/core/ListItemText";
 import ListItem from "@material-ui/core/ListItem";
 import Avatar from "@material-ui/core/Avatar";
+import { ReduxState } from "~store/index";
 
 const Transition = props => <Slide direction={"up"} {...props} />;
 
@@ -48,8 +49,15 @@ const styles = theme => ({
     }
 });
 
-class AccountQRFullscreen extends React.PureComponent {
-    state = {
+interface IState {
+    open: boolean;
+}
+
+interface IProps {
+}
+
+class AccountQRFullscreen extends React.PureComponent<ReturnType<typeof mapStateToProps> & IProps> {
+    state: IState = {
         open: false
     };
 
@@ -143,10 +151,10 @@ AccountQRFullscreen.defaultProps = {
     mode: "ACCOUNT"
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         accounts: state.accounts.accounts,
-        selectedAccount: state.accounts.selected_account
+        selectedAccount: state.accounts.selectedAccount
     };
 };
 
diff --git a/src/components/Queue/QueueHeaderIcon.tsx b/src/components/Queue/QueueHeaderIcon.tsx
index ee7ca8ea..fe7569b2 100644
--- a/src/components/Queue/QueueHeaderIcon.tsx
+++ b/src/components/Queue/QueueHeaderIcon.tsx
@@ -7,11 +7,18 @@ import IconButton from "@material-ui/core/IconButton";
 import SyncIcon from "@material-ui/icons/Sync";
 
 import { queueStartSync } from "~actions/queue";
+import { AppDispatch, ReduxState } from "~store/index";
 
 const styles = {};
 
-class QueueHeaderIcon extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class QueueHeaderIcon extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
     updateDelay: null | number;
 
     constructor(props, context) {
@@ -74,7 +81,7 @@ class QueueHeaderIcon extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
 
@@ -84,7 +91,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         queueStartSync: () => dispatch(queueStartSync())
     };
diff --git a/src/components/Queue/QueueSidebarListItem.tsx b/src/components/Queue/QueueSidebarListItem.tsx
index f0e80c24..1a618619 100644
--- a/src/components/Queue/QueueSidebarListItem.tsx
+++ b/src/components/Queue/QueueSidebarListItem.tsx
@@ -8,6 +8,7 @@ import LinearProgress from "@material-ui/core/LinearProgress";
 import SyncIcon from "@material-ui/icons/Sync";
 
 import { queueStartSync } from "~actions/queue";
+import { AppDispatch, ReduxState } from "~store/index";
 
 const styles = {
     listItemText: {
@@ -15,8 +16,14 @@ const styles = {
     }
 };
 
-class QueueSidebarListItem extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class QueueSidebarListItem extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
     updateDelay: null | number;
 
     constructor(props, context) {
@@ -102,7 +109,7 @@ class QueueSidebarListItem extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         queueMaxRequestCounter: state.queue.max_request_counter,
         queueRequestCounter: state.queue.request_counter,
@@ -111,7 +118,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         queueStartSync: () => dispatch(queueStartSync())
     };
diff --git a/src/components/ReduxForm/Fields/renderAccountsPicker.tsx b/src/components/ReduxForm/Fields/renderAccountsPicker.tsx
index 9e973dd0..8c61ca2f 100644
--- a/src/components/ReduxForm/Fields/renderAccountsPicker.tsx
+++ b/src/components/ReduxForm/Fields/renderAccountsPicker.tsx
@@ -3,10 +3,14 @@ import { connect } from "react-redux";
 import { translate } from "react-i18next";
 import Grid from "@material-ui/core/Grid";
 import Typography from "@material-ui/core/Typography";
+import { ReduxState } from "~store/index";
 
 import AccountListItemChip from "../../AccountList/AccountListItemChip";
 
-const renderAccountsPicker = ({ t, i18n, tReady, input, label, meta: { error }, accounts, ...otherProps }) => {
+interface IProps {
+}
+
+const renderAccountsPicker = ({ t, i18n, tReady, input, label, meta: { error }, accounts, ...otherProps }: ReturnType<typeof mapStateToProps> & IProps) => {
     const inputValue = input.value;
     const inputOnChange = input.onChange;
 
@@ -73,7 +77,7 @@ const renderAccountsPicker = ({ t, i18n, tReady, input, label, meta: { error },
     );
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         accounts: state.accounts.accounts
     };
diff --git a/src/components/SavingsGoals/SavingsGoalListItemWrapper.tsx b/src/components/SavingsGoals/SavingsGoalListItemWrapper.tsx
index b25a07fe..88856530 100644
--- a/src/components/SavingsGoals/SavingsGoalListItemWrapper.tsx
+++ b/src/components/SavingsGoals/SavingsGoalListItemWrapper.tsx
@@ -1,13 +1,17 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
+import { ReduxState } from "~store/index";
 
 import SavingsGoalListItem from "./SavingsGoalListItem";
 import SavingsGoalSmallListItem from "./SavingsGoalSmallListItem";
 
 import SavingsGoal from "~models/SavingsGoal";
 
-const SavingsGoalListItemWrapper = props => {
+interface IProps {
+}
+
+const SavingsGoalListItemWrapper = (props: ReturnType<typeof mapStateToProps> & IProps) => {
     const {
         t,
         type,
@@ -55,7 +59,7 @@ SavingsGoalListItemWrapper.propTypes = {
     savingsGoal: PropTypes.instanceOf(SavingsGoal)
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         accounts: state.accounts.accounts,
 
diff --git a/src/components/SavingsGoals/SavingsGoalsList.tsx b/src/components/SavingsGoals/SavingsGoalsList.tsx
index 6d473f74..c4001fbb 100644
--- a/src/components/SavingsGoals/SavingsGoalsList.tsx
+++ b/src/components/SavingsGoals/SavingsGoalsList.tsx
@@ -3,6 +3,7 @@ import { connect } from "react-redux";
 import { translate } from "react-i18next";
 import List from "@material-ui/core/List";
 import Grid from "@material-ui/core/Grid";
+import { ReduxState } from "~store/index";
 
 import SavingsGoalListItemWrapper from "./SavingsGoalListItemWrapper";
 
@@ -15,7 +16,10 @@ const styles = {
     }
 };
 
-const SavingsGoalList = props => {
+interface IProps {
+}
+
+const SavingsGoalList = (props: ReturnType<typeof mapStateToProps> & IProps) => {
     const { t, savingsGoals, type, hiddenTypes } = props;
 
     const savingsGoalsList = Object.keys(savingsGoals)
@@ -73,7 +77,7 @@ SavingsGoalList.defaultProps = {
     hiddenTypes: []
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         accounts: state.accounts.accounts,
 
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 46473630..4cafe110 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -21,6 +21,8 @@ import ShareIcon from "@material-ui/icons/Share";
 import TimeLineIcon from "@material-ui/icons/Timeline";
 import CardIcon from "@material-ui/icons/CreditCard";
 import Bookmark from "@material-ui/icons/Bookmark";
+import { AppWindow } from "~app";
+import { AppDispatch, ReduxState } from "~store/index";
 import FileUploadIcon from "./CustomSVG/FileUpload";
 import TrophyIcon from "./CustomSVG/Trophy";
 
@@ -59,7 +61,16 @@ const styles = {
     }
 };
 
-class Sidebar extends React.Component {
+interface IState {
+}
+
+interface IProps {
+    t: AppWindow["t"];
+}
+
+class Sidebar extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -231,7 +242,7 @@ class Sidebar extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         open: state.sidebar.open,
         stickyMenu: state.options.sticky_menu,
@@ -247,7 +258,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         closeDrawer: () => dispatch(closeSidebar()),
         closeSidebar: () => dispatch(closeSidebar())
diff --git a/src/components/SwitchKeysMenu.tsx b/src/components/SwitchKeysMenu.tsx
index f0a87a09..dfb5b79e 100644
--- a/src/components/SwitchKeysMenu.tsx
+++ b/src/components/SwitchKeysMenu.tsx
@@ -14,6 +14,7 @@ import KeyIcon from "@material-ui/icons/VpnKey";
 import RemoveIcon from "@material-ui/icons/Delete";
 import EditIcon from "@material-ui/icons/Edit";
 import VerifiedUserIcon from "@material-ui/icons/VerifiedUser";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import TranslateTypography from "./TranslationHelpers/Typography";
 
@@ -55,7 +56,15 @@ const styles = {
     }
 };
 
-class SwitchKeysMenu extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class SwitchKeysMenu extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props) {
         super(props);
 
@@ -205,7 +214,7 @@ class SwitchKeysMenu extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         derivedPassword: state.registration.derived_password,
         derivedPasswordIdentifier: state.registration.identifier,
@@ -217,7 +226,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         registrationSwitchKeys: storedKeyIndex => dispatch(registrationSwitchKeys(storedKeyIndex)),
 
diff --git a/src/pages/AccountInfo.tsx b/src/pages/AccountInfo.tsx
index 0d5b889d..3f322f9a 100644
--- a/src/pages/AccountInfo.tsx
+++ b/src/pages/AccountInfo.tsx
@@ -44,6 +44,7 @@ import { shareInviteMonetaryAccountInquiryChangeStatus } from "~actions/share_in
 import { connectGetPermissions } from "~functions/ConnectGetPermissions";
 import { accountsDeactivate, accountsUpdate, accountsUpdateSettings } from "~store/accounts/thunks";
 import { bunqMeTabsUpdate } from "~store/bunqMeTabs/thunks";
+import { AppDispatch, ReduxState } from "~store/index";
 import { actions as snackbarActions } from "~store/snackbar";
 
 const styles = {
@@ -105,8 +106,14 @@ const PersonChip = ({ alias, ...otherProps }) => {
     );
 };
 
-class AccountInfo extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class AccountInfo extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -575,7 +582,7 @@ class AccountInfo extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         hideBalance: state.options.hide_balance,
 
@@ -594,7 +601,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch) => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
 
diff --git a/src/pages/AddAccount.tsx b/src/pages/AddAccount.tsx
index 86ff7c0c..c2e60c76 100644
--- a/src/pages/AddAccount.tsx
+++ b/src/pages/AddAccount.tsx
@@ -20,6 +20,7 @@ import TranslateButton from "~components/TranslationHelpers/Button";
 import TranslateTypography from "~components/TranslationHelpers/Typography";
 
 import { createAccount } from "~store/accounts/thunks";
+import { AppDispatch, ReduxState } from "~store/index";
 import { actions as snackbarActions } from "~store/snackbar";
 
 const styles: any = {
@@ -46,8 +47,14 @@ const styles: any = {
     }
 };
 
-class AddAccount extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class AddAccount extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -248,18 +255,17 @@ class AddAccount extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         accounts: state.accounts.accounts,
         accountsLoading: state.accounts.loading,
-        accountsCreateLoading: state.accounts.create_loading,
+        accountsCreateLoading: state.accounts.createLoading,
 
         user: state.user.user
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         createAccount: (userId, currency, description, dailyLimit, color, savingsGoal, accountType) =>
             dispatch(
diff --git a/src/pages/ApplicationInfo.tsx b/src/pages/ApplicationInfo.tsx
index 83a222bc..77b83784 100644
--- a/src/pages/ApplicationInfo.tsx
+++ b/src/pages/ApplicationInfo.tsx
@@ -25,6 +25,7 @@ import TranslateTypography from "~components/TranslationHelpers/Typography";
 import { allReleases } from "~functions/VersionChecker";
 import { humanReadableDate } from "~functions/Utils";
 import Logger from "~functions/Logger";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import { actions as snackbarActions } from "~store/snackbar";
 
@@ -38,8 +39,14 @@ const styles: any = {
     }
 };
 
-class ApplicationInfo extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class ApplicationInfo extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -165,12 +172,11 @@ class ApplicationInfo extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {};
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
     };
diff --git a/src/pages/BunqMePersonal/BunqMePersonal.tsx b/src/pages/BunqMePersonal/BunqMePersonal.tsx
index 0fd3f1f0..0f270de8 100644
--- a/src/pages/BunqMePersonal/BunqMePersonal.tsx
+++ b/src/pages/BunqMePersonal/BunqMePersonal.tsx
@@ -11,6 +11,7 @@ import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
 import UrlIcon from "@material-ui/icons/Link";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import LinkPreviewField from "./LinkPreviewField";
 import QRCode from "~components/QR/QRCode";
@@ -62,7 +63,15 @@ const styles = {
     }
 };
 
-class BunqMePersonal extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class BunqMePersonal extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -225,15 +234,14 @@ class BunqMePersonal extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         accounts: state.accounts.accounts
     };
 };
 
-const mapDispatchToProps = (dispatch, props) => {
-    const { BunqJSClient } = props;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {};
 };
 
diff --git a/src/pages/BunqMeTab/BunqMeTab.tsx b/src/pages/BunqMeTab/BunqMeTab.tsx
index 9ca53014..b19ed2ea 100644
--- a/src/pages/BunqMeTab/BunqMeTab.tsx
+++ b/src/pages/BunqMeTab/BunqMeTab.tsx
@@ -13,6 +13,7 @@ import AddIcon from "@material-ui/icons/Add";
 import AccountList from "~components/AccountList/AccountList";
 import BunqMeTabList from "~components/BunqMeTabList";
 import { bunqMeTabsUpdate } from "~store/bunqMeTabs/thunks";
+import { AppDispatch, ReduxState } from "~store/index";
 import BunqMeTabForm from "./BunqMeTabForm";
 
 const styles = {
@@ -21,8 +22,14 @@ const styles = {
     }
 };
 
-class BunqMeTab extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class BunqMeTab extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -86,7 +93,7 @@ class BunqMeTab extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         accounts: state.accounts.accounts,
         selectedAccount: state.accounts.selected_account,
@@ -97,8 +104,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, props) => {
-    const { BunqJSClient } = props;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         bunqMeTabsUpdate: (userId, accountId) => dispatch(bunqMeTabsUpdate(userId, accountId))
     };
diff --git a/src/pages/Cards/Cards.tsx b/src/pages/Cards/Cards.tsx
index 4c39e908..ccd7b362 100644
--- a/src/pages/Cards/Cards.tsx
+++ b/src/pages/Cards/Cards.tsx
@@ -16,6 +16,7 @@ import Typography from "@material-ui/core/Typography";
 import CircularProgress from "@material-ui/core/CircularProgress";
 
 import DeleteIcon from "@material-ui/icons/Delete";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import CardListItem from "./CardListItem";
 import CvcCodeListItem from "./CvcCodeListItem";
@@ -51,8 +52,14 @@ const styles = {
     }
 };
 
-class Cards extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class Cards extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -435,7 +442,7 @@ class Cards extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         limitedPermissions: state.user.limited_permissions,
@@ -447,7 +454,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         cardsUpdate: userId => dispatch(cardsUpdate(userId)),
         cardsSetCardOrder: cardOrder => dispatch(cardsActions.setOrder(cardOrder)),
diff --git a/src/pages/Cards/CvcCodeListItem.tsx b/src/pages/Cards/CvcCodeListItem.tsx
index a5923da1..fd9b6d91 100644
--- a/src/pages/Cards/CvcCodeListItem.tsx
+++ b/src/pages/Cards/CvcCodeListItem.tsx
@@ -10,9 +10,16 @@ import RefreshIcon from "@material-ui/icons/Refresh";
 import VisibilityIcon from "@material-ui/icons/Visibility";
 
 import { cardGenerateCvc2, cardUpdateCvc2Codes } from "~store/cardCvc2/thunks";
+import { AppDispatch, ReduxState } from "~store/index";
 
-class CvcCodeListItem extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class CvcCodeListItem extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -67,7 +74,7 @@ class CvcCodeListItem extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         cvcCodes: state.card_cvc2.cvc2_codes,
@@ -78,7 +85,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         cardUpdateCvc2Codes: (userId, cardId) => dispatch(cardUpdateCvc2Codes(userId, cardId)),
         cardGenerateCvc2: (userId, cardId) => dispatch(cardGenerateCvc2(userId, cardId))
diff --git a/src/pages/Cards/VirtualAccountNumbersDialog.tsx b/src/pages/Cards/VirtualAccountNumbersDialog.tsx
index 9493c013..64487689 100644
--- a/src/pages/Cards/VirtualAccountNumbersDialog.tsx
+++ b/src/pages/Cards/VirtualAccountNumbersDialog.tsx
@@ -9,6 +9,7 @@ import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 
 import AccountListItem from "~components/AccountList/AccountListItem";
+import { ReduxState } from "~store/index";
 
 const styles = {
     list: {
@@ -16,7 +17,15 @@ const styles = {
     }
 };
 
-class VirtualAccountNumbersDialog extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class VirtualAccountNumbersDialog extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -73,7 +82,7 @@ class VirtualAccountNumbersDialog extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         accounts: state.accounts.accounts
     };
diff --git a/src/pages/CategoryDashboard/CategoryDashboard.tsx b/src/pages/CategoryDashboard/CategoryDashboard.tsx
index 827a6c26..2c39bda3 100644
--- a/src/pages/CategoryDashboard/CategoryDashboard.tsx
+++ b/src/pages/CategoryDashboard/CategoryDashboard.tsx
@@ -14,6 +14,7 @@ import TranslateTypography from "~components/TranslationHelpers/Typography";
 import TranslateButton from "~components/TranslationHelpers/Button";
 
 import { actions as categoriesActions } from "~store/categories";
+import { AppDispatch, ReduxState } from "~store/index";
 import { actions as snackbarActions } from "~store/snackbar";
 
 const styles: any = {
@@ -28,8 +29,14 @@ const styles: any = {
     }
 };
 
-class CategoryDashboard extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class CategoryDashboard extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -219,7 +226,7 @@ class CategoryDashboard extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         categories: state.categories.categories,
         categories_last_udate: state.categories.last_update,
@@ -227,7 +234,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
         removeCategory: (...params) => dispatch(categoriesActions.removeCategory(...params)),
diff --git a/src/pages/Connect/Connect.tsx b/src/pages/Connect/Connect.tsx
index c1592e00..dce6612d 100644
--- a/src/pages/Connect/Connect.tsx
+++ b/src/pages/Connect/Connect.tsx
@@ -15,6 +15,7 @@ import ListSubheader from "@material-ui/core/ListSubheader";
 
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import { accountsUpdate } from "~store/accounts/thunks";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import BudgetFields from "./BudgetFields";
 import TimeLimitFields from "./TimeLimitFields";
@@ -57,8 +58,14 @@ const styles: any = {
     }
 };
 
-class Connect extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class Connect extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -604,7 +611,7 @@ class Connect extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         limitedPermissions: state.user.limited_permissions,
@@ -618,14 +625,13 @@ const mapStateToProps = state => {
 
         accounts: state.accounts.accounts,
         accountsLoading: state.accounts.loading,
-        selectedAccountId: state.accounts.selected_account,
+        selectedAccountId: state.accounts.selectedAccount,
 
         shareInviteMonetaryAccountInquiryLoading: state.share_invite_monetary_account_inquiry.loading
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
 
diff --git a/src/pages/Connect/ConnectListItem.tsx b/src/pages/Connect/ConnectListItem.tsx
index b898f25e..ae8a6f26 100644
--- a/src/pages/Connect/ConnectListItem.tsx
+++ b/src/pages/Connect/ConnectListItem.tsx
@@ -12,6 +12,7 @@ import { formatMoney } from "~functions/Utils";
 
 import { shareInviteMonetaryAccountInquiryChangeStatus } from "~actions/share_invite_monetary_account_inquiry";
 import { shareInviteMonetaryAccountResponseChangeStatus } from "~actions/share_invite_monetary_account_response";
+import { AppDispatch, ReduxState } from "~store/index";
 
 const styles = {
     smallAvatar: {
@@ -20,7 +21,15 @@ const styles = {
     }
 };
 
-class ConnectListItem extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class ConnectListItem extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -191,14 +200,13 @@ class ConnectListItem extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         shareInviteMonetaryAccountInquiryChangeStatus: (
             userId,
diff --git a/src/pages/Contacts/Contacts.tsx b/src/pages/Contacts/Contacts.tsx
index 582204f2..31b09913 100644
--- a/src/pages/Contacts/Contacts.tsx
+++ b/src/pages/Contacts/Contacts.tsx
@@ -11,6 +11,7 @@ import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 
 import TranslateTypography from "~components/TranslationHelpers/Typography";
 import TranslateButton from "~components/TranslationHelpers/Button";
+import { AppDispatch, ReduxState } from "~store/index";
 import ContactHeader from "./ContactHeader";
 
 const remote = require("electron").remote;
@@ -39,8 +40,14 @@ const styles: any = {
     }
 };
 
-class Contacts extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class Contacts extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -191,7 +198,7 @@ class Contacts extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         contacts: state.contacts.contacts,
         contactsLoading: state.contacts.loading,
@@ -199,8 +206,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, props) => {
-    const { BunqJSClient } = props;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         contactInfoUpdateGoogle: accessToken => dispatch(contactInfoUpdateGoogle(accessToken)),
         contactInfoUpdateApple: filePaths => dispatch(contactInfoUpdateApple(filePaths)),
diff --git a/src/pages/Dashboard/AddMoneyButton.tsx b/src/pages/Dashboard/AddMoneyButton.tsx
index 5d8e53dd..b6079924 100644
--- a/src/pages/Dashboard/AddMoneyButton.tsx
+++ b/src/pages/Dashboard/AddMoneyButton.tsx
@@ -7,8 +7,17 @@ import Typography from "@material-ui/core/Typography";
 import MoneyIcon from "@material-ui/icons/AttachMoney";
 
 import { requestInquirySend } from "~actions/request_inquiry";
+import { AppDispatch, ReduxState } from "~store/index";
+
+interface IState {
+}
+
+interface IProps {
+}
+
+class AddMoneyButton extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
-class AddMoneyButton extends React.Component {
     constructor(props, context) {
         super(props, context);
     }
@@ -57,20 +66,19 @@ class AddMoneyButton extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         requestInquiryLoading: state.request_inquiry.loading,
 
         limitedPermissions: state.user.limited_permissions,
 
-        selectedAccount: state.accounts.selected_account,
+        selectedAccount: state.accounts.selectedAccount,
 
         environment: state.registration.environment
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         requestInquirySend: (userId, accountId, requestInquiries) =>
             dispatch(requestInquirySend(userId, accountId, requestInquiries))
diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index f7a72780..5cdbf1aa 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -15,6 +15,7 @@ import Tabs from "@material-ui/core/Tabs";
 import Tab from "@material-ui/core/Tab";
 
 import ExitToAppIcon from "@material-ui/icons/ExitToApp";
+import { AppWindow } from "~app";
 
 import TranslateButton from "~components/TranslationHelpers/Button";
 import CombinedList from "~components/CombinedList/CombinedList";
@@ -23,6 +24,7 @@ import NavLink from "~components/Routing/NavLink";
 import AttachmentImage from "~components/AttachmentImage/AttachmentImage";
 import SavingsGoalsList from "~components/SavingsGoals/SavingsGoalsList";
 import SwitchKeysMenu from "~components/SwitchKeysMenu";
+import { AppDispatch, ReduxState } from "~store/index";
 import AddMoneyButton from "./AddMoneyButton";
 
 import { registrationLogOut } from "~actions/registration";
@@ -61,7 +63,16 @@ const styles = {
     }
 };
 
-class Dashboard extends React.Component {
+interface IState {
+}
+
+interface IProps {
+    t: AppWindow["t"];
+}
+
+class Dashboard extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -243,7 +254,7 @@ class Dashboard extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         userType: state.user.user_type,
@@ -264,8 +275,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         // hard-logout
         registrationLogOut: () => dispatch(registrationLogOut())
diff --git a/src/pages/DebugPage.tsx b/src/pages/DebugPage.tsx
index d2993b16..23713410 100644
--- a/src/pages/DebugPage.tsx
+++ b/src/pages/DebugPage.tsx
@@ -6,6 +6,7 @@ import Grid from "@material-ui/core/Grid";
 import Button from "@material-ui/core/Button";
 
 import ReactJsonWrapper from "~components/ReactJsonWrapper";
+import { ReduxState } from "~store/index";
 
 const styles = {
     paper: {
@@ -13,7 +14,15 @@ const styles = {
     }
 };
 
-class DebugPage extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class DebugPage extends React.Component<ReturnType<typeof mapStateToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -48,9 +57,9 @@ class DebugPage extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
-        reduxState: state
+        reduxState: state,
     };
 };
 
diff --git a/src/pages/Disclaimer.tsx b/src/pages/Disclaimer.tsx
index 90427ea2..6445cde2 100644
--- a/src/pages/Disclaimer.tsx
+++ b/src/pages/Disclaimer.tsx
@@ -15,11 +15,13 @@ import LockIcon from "@material-ui/icons/Lock";
 import DesktopIcon from "@material-ui/icons/DesktopMac";
 import BuildIcon from "@material-ui/icons/Edit";
 import LiveHelpIcon from "@material-ui/icons/LiveHelp";
+import { AppWindow } from "~app";
 
 import TranslateButton from "~components/TranslationHelpers/Button";
 
 import Analytics from "~functions/Analytics";
 import { setAnalyticsEnabled } from "~actions/options";
+import { AppDispatch, ReduxState } from "~store/index";
 
 const styles = {
     wrapperContainer: {
@@ -31,7 +33,16 @@ const styles = {
     buttons: { marginTop: 16 }
 };
 
-class Disclaimer extends React.Component {
+interface IState {
+}
+
+interface IProps {
+    t: AppWindow["t"];
+}
+
+class Disclaimer extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -120,13 +131,13 @@ class Disclaimer extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         analyticsEnabled: state.options.analytics_enabled
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         setAnalyticsEnabled: enabled => dispatch(setAnalyticsEnabled(enabled))
     };
diff --git a/src/pages/Exports.tsx b/src/pages/Exports.tsx
index c2e305ee..0118b290 100644
--- a/src/pages/Exports.tsx
+++ b/src/pages/Exports.tsx
@@ -48,6 +48,7 @@ import CategoryHelper from "~components/Categories/CategoryHelper";
 import { paymentFilter, masterCardActionFilter } from "~functions/DataFilters";
 import { exportNew } from "~store/exportNew/thunks";
 import { exportInfoUpdate } from "~store/exports/thunks";
+import { AppDispatch, ReduxState } from "~store/index";
 import { actions as snackbarActions } from "~store/snackbar";
 
 const escapeCsv = val => `"${val.replace('"', '"""')}"`;
@@ -71,8 +72,14 @@ const styles = {
     }
 };
 
-class Exports extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class Exports extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -589,23 +596,23 @@ class Exports extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         limitedPermissions: state.user.limited_permissions,
-        exportNewLoading: state.export_new.loading,
+        exportNewLoading: state.exportNew.loading,
 
         exports: state.exports.exports,
         exportsLoading: state.exports.loading,
 
-        selectedAccountId: state.accounts.selected_account,
+        selectedAccountId: state.accounts.selectedAccount,
 
         searchTerm: state.search_filter.search_term,
-        dateFromFilter: state.date_filter.from_date,
-        dateToFilter: state.date_filter.to_date,
+        dateFromFilter: state.dateFilter.from_date,
+        dateToFilter: state.dateFilter.to_date,
 
-        selectedAccountIds: state.account_id_filter.selected_account_ids,
-        toggleAccountIds: state.account_id_filter.toggle,
+        selectedAccountIds: state.accountIdFilter.selectedAccountIds,
+        toggleAccountIds: state.accountIdFilter.toggle,
 
         categories: state.categories.categories,
         categoryConnections: state.categories.category_connections,
@@ -617,8 +624,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
         exportInfoUpdate: (userId, accountId) => dispatch(exportInfoUpdate(userId, accountId)),
diff --git a/src/pages/Login/OAuthManagement.tsx b/src/pages/Login/OAuthManagement.tsx
index 19aabfc0..c4438bcb 100644
--- a/src/pages/Login/OAuthManagement.tsx
+++ b/src/pages/Login/OAuthManagement.tsx
@@ -17,6 +17,7 @@ import Logger from "~functions/Logger";
 import BunqErrorHandler from "~functions/BunqErrorHandler";
 
 import { oauthSetDetails } from "~actions/oauth";
+import { AppDispatch, ReduxState } from "~store/index";
 import { actions as snackbarActions } from "~store/snackbar";
 
 const styles = {
@@ -65,8 +66,14 @@ const styles = {
     }
 };
 
-class OAuthManagement extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class OAuthManagement extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
     isLoading: boolean;
 
     constructor(props, context) {
@@ -326,7 +333,7 @@ class OAuthManagement extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         clientId: state.oauth.client_id,
         clientSecret: state.oauth.client_secret,
@@ -339,8 +346,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
 
diff --git a/src/pages/LoginPassword.tsx b/src/pages/LoginPassword.tsx
index b244d990..fac8f9a0 100644
--- a/src/pages/LoginPassword.tsx
+++ b/src/pages/LoginPassword.tsx
@@ -21,6 +21,7 @@ import VisibilityOff from "@material-ui/icons/VisibilityOff";
 import TranslateButton from "~components/TranslationHelpers/Button";
 
 import { registrationLogOut, registrationSetPassword, registrationSkipPassword } from "~actions/registration";
+import { AppDispatch, ReduxState } from "~store/index";
 
 const styles = {
     wrapperContainer: {
@@ -69,7 +70,15 @@ const styles = {
     }
 };
 
-class LoginPassword extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class LoginPassword extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -386,7 +395,7 @@ class LoginPassword extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         statusMessage: state.application.status_message,
 
@@ -403,7 +412,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         // use no password
         useNoPasswordLogin: () => dispatch(registrationSkipPassword()),
diff --git a/src/pages/MasterCardActionInfo.tsx b/src/pages/MasterCardActionInfo.tsx
index 8db00bd7..41633b69 100644
--- a/src/pages/MasterCardActionInfo.tsx
+++ b/src/pages/MasterCardActionInfo.tsx
@@ -33,6 +33,7 @@ import { formatMoney, humanReadableDate } from "~functions/Utils";
 import { masterCardActionText, masterCardActionParser } from "~functions/EventStatusTexts";
 import { masterCardActionInfoUpdate } from "~actions/master_card_action_info";
 import { actions as applicationActions } from "~store/application";
+import { AppDispatch, ReduxState } from "~store/index";
 
 const styles = {
     btn: {},
@@ -48,8 +49,14 @@ const styles = {
     }
 };
 
-class MasterCardActionInfo extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class MasterCardActionInfo extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -314,7 +321,7 @@ class MasterCardActionInfo extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
 
@@ -327,8 +334,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         applicationSetPDFMode: enabled => dispatch(applicationActions.setPdfMode(enabled)),
 
diff --git a/src/pages/Pay/ConfirmationDialog.tsx b/src/pages/Pay/ConfirmationDialog.tsx
index fc4c9953..6866be7b 100644
--- a/src/pages/Pay/ConfirmationDialog.tsx
+++ b/src/pages/Pay/ConfirmationDialog.tsx
@@ -13,10 +13,19 @@ import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 
 import { formatMoney } from "~functions/Utils";
+import { ReduxState } from "~store/index";
 
 const styles = {};
 
-class ConfirmationDialog extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class ConfirmationDialog extends React.Component<ReturnType<typeof mapStateToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -107,7 +116,7 @@ class ConfirmationDialog extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         accounts: state.accounts.accounts
     };
diff --git a/src/pages/Pay/Pay.tsx b/src/pages/Pay/Pay.tsx
index 113c2f92..4a0f6775 100644
--- a/src/pages/Pay/Pay.tsx
+++ b/src/pages/Pay/Pay.tsx
@@ -26,6 +26,7 @@ import Tooltip from "@material-ui/core/Tooltip";
 import EventIcon from "@material-ui/icons/Event";
 import ListIcon from "@material-ui/icons/List";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import ConfirmationDialog from "./ConfirmationDialog";
 import AccountSelectorDialog from "~components/FormFields/AccountSelectorDialog";
@@ -72,8 +73,14 @@ const styles = {
     }
 };
 
-class Pay extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class Pay extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -863,12 +870,12 @@ class Pay extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         payLoading: state.pay.loading,
 
         accounts: state.accounts.accounts,
-        selectedAccount: state.accounts.selected_account,
+        selectedAccount: state.accounts.selectedAccount,
 
         language: state.options.language,
 
@@ -882,8 +889,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, props) => {
-    const { BunqJSClient } = props;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         paySend: (userId, accountId, description, amount, targets, draft = false) =>
             dispatch(paySend(userId, accountId, description, amount, targets, draft)),
diff --git a/src/pages/PaymentInfo.tsx b/src/pages/PaymentInfo.tsx
index 2c0b2c88..b502f0d7 100644
--- a/src/pages/PaymentInfo.tsx
+++ b/src/pages/PaymentInfo.tsx
@@ -35,6 +35,7 @@ import NoteTextForm from "~components/NoteTexts/NoteTextForm";
 import { setTheme } from "~actions/options";
 import { paymentsUpdate } from "~actions/payment_info";
 import { actions as applicationActions } from "~store/application";
+import { AppDispatch, ReduxState } from "~store/index";
 
 const styles = {
     btn: {},
@@ -50,8 +51,14 @@ const styles = {
     }
 };
 
-class PaymentInfo extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class PaymentInfo extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -309,7 +316,7 @@ class PaymentInfo extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
 
@@ -322,8 +329,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         applicationSetPDFMode: enabled => dispatch(applicationActions.setPdfMode(enabled)),
 
diff --git a/src/pages/PendingPayments/PendingPayments.tsx b/src/pages/PendingPayments/PendingPayments.tsx
index 56750383..2fc68a13 100644
--- a/src/pages/PendingPayments/PendingPayments.tsx
+++ b/src/pages/PendingPayments/PendingPayments.tsx
@@ -16,9 +16,11 @@ import Checkbox from "@material-ui/core/Checkbox";
 import Typography from "@material-ui/core/Typography";
 
 import DeleteIcon from "@material-ui/icons/Delete";
+import { AppWindow } from "~app";
 
 import LazyAttachmentImage from "~components/AttachmentImage/LazyAttachmentImage";
 import TranslateTypography from "~components/TranslationHelpers/Typography";
+import { AppDispatch, ReduxState } from "~store/index";
 import ConfirmationDialog from "./ConfirmationDialog";
 import PendingPaymentRow from "./PendingPaymentRow";
 
@@ -32,6 +34,8 @@ import {
 } from "~actions/pending_payments";
 import { actions as snackbarActions } from "~store/snackbar";
 
+declare let window: AppWindow;
+
 const styles = {
     paper: {
         padding: 16
@@ -68,8 +72,14 @@ const styles = {
     }
 };
 
-class PendingPayments extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class PendingPayments extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -251,6 +261,7 @@ class PendingPayments extends React.Component<any> {
     paySelected = () => {
         const { t, user } = this.props;
         const failedText = t("Failed to complete some of the selected payments");
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
         this.confirmAction("Are you sure you wish to complete these payments?", () => {
             const groupedParsedPayments = this.parsePendingPayments();
@@ -276,6 +287,7 @@ class PendingPayments extends React.Component<any> {
     draftSelected = () => {
         const { t, user } = this.props;
         const failedText = t("Failed to draft some of the selected payments");
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
         this.confirmAction("Are you sure you wish to draft these payments?", () => {
             const groupedParsedPayments = this.parsePendingPayments();
@@ -468,7 +480,7 @@ class PendingPayments extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         accounts: state.accounts.accounts,
@@ -478,11 +490,14 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const BunqJSClient = ownProps.BunqJSClient;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
-        BunqErrorHandler: (error, message) => BunqErrorHandler(dispatch, error, message, BunqJSClient),
+        BunqErrorHandler: (error, message) => {
+            const actions = [];
+            BunqErrorHandler(actions, error, message);
+            dispatch(actions);
+        },
 
         pendingPaymentsClear: () => dispatch(pendingPaymentsClear()),
         pendingPaymentsClearAccount: accountId => dispatch(pendingPaymentsClearAccount(accountId)),
diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
index 2c6a08d6..d69049d8 100644
--- a/src/pages/Profile/Profile.tsx
+++ b/src/pages/Profile/Profile.tsx
@@ -19,6 +19,7 @@ import UrlIcon from "@material-ui/icons/Link";
 import AliasList from "~components/AliasList";
 import UploadFullscreen from "~components/FileUpload/UploadFullscreen";
 import LazyAttachmentImage from "~components/AttachmentImage/LazyAttachmentImage";
+import { AppDispatch, ReduxState } from "~store/index";
 import NotificationFilters from "./NotificationFilters";
 import ProfileDetailsForm from "./ProfileDetailsForm";
 import BusinessInfo from "./BusinessInfo";
@@ -64,8 +65,14 @@ const styles: any = {
     }
 };
 
-class Profile extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class Profile extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -301,7 +308,7 @@ class Profile extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         userType: state.user.user_type,
@@ -311,14 +318,17 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
         usersUpdate: updated => dispatch(usersUpdate(updated)),
         userUpdateImage: (userId, attachmentId) => dispatch(userUpdateImage(userId, attachmentId)),
 
-        BunqErrorHandler: (error, message) => BunqErrorHandler(dispatch, error, message)
+        BunqErrorHandler: (error, message) => {
+            const actions = [];
+            BunqErrorHandler(actions, error, message)
+            dispatch(actions);
+        }
     };
 };
 
diff --git a/src/pages/RequestInquiry/RequestInquiry.tsx b/src/pages/RequestInquiry/RequestInquiry.tsx
index 0df7d3c1..893aa22f 100644
--- a/src/pages/RequestInquiry/RequestInquiry.tsx
+++ b/src/pages/RequestInquiry/RequestInquiry.tsx
@@ -19,6 +19,7 @@ import TargetSelection from "~components/FormFields/TargetSelection";
 import MoneyFormatInput from "~components/FormFields/MoneyFormatInput";
 import RedirectUrl from "~components/FormFields/RedirectUrl";
 import TranslateButton from "~components/TranslationHelpers/Button";
+import { AppDispatch, ReduxState } from "~store/index";
 import ConfirmationDialog from "./ConfirmationDialog";
 
 import SplitAmountForm from "./SplitAmountForm";
@@ -50,8 +51,14 @@ const styles = {
     titleGrid: { display: "flex", alignItems: "center" }
 };
 
-class RequestInquiry extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class RequestInquiry extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -639,7 +646,7 @@ class RequestInquiry extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         requestInquiryLoading: state.request_inquiry.loading,
 
@@ -651,8 +658,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, props) => {
-    const { BunqJSClient } = props;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         requestInquirySend: (userId, accountId, requestInquiries) =>
             dispatch(requestInquirySend(userId, accountId, requestInquiries)),
diff --git a/src/pages/RequestInquiryInfo.tsx b/src/pages/RequestInquiryInfo.tsx
index 34b53b53..379f4b65 100644
--- a/src/pages/RequestInquiryInfo.tsx
+++ b/src/pages/RequestInquiryInfo.tsx
@@ -36,6 +36,7 @@ import { requestInquiryText } from "~functions/EventStatusTexts";
 import { requestInquiryCancel } from "~actions/request_inquiry";
 import { requestInquiryUpdate } from "~actions/request_inquiry_info";
 import { actions as applicationActions } from "~store/application";
+import { AppDispatch, ReduxState } from "~store/index";
 
 const styles = {
     btn: {},
@@ -54,8 +55,14 @@ const styles = {
     }
 };
 
-class RequestInquiryInfo extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class RequestInquiryInfo extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -333,7 +340,7 @@ class RequestInquiryInfo extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         limitedPermissions: state.user.limited_permissions,
@@ -347,8 +354,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         applicationSetPDFMode: enabled => dispatch(applicationActions.setPdfMode(enabled)),
 
diff --git a/src/pages/RequestResponseInfo/RequestResponseInfo.tsx b/src/pages/RequestResponseInfo/RequestResponseInfo.tsx
index c0860748..83038ac6 100644
--- a/src/pages/RequestResponseInfo/RequestResponseInfo.tsx
+++ b/src/pages/RequestResponseInfo/RequestResponseInfo.tsx
@@ -36,6 +36,7 @@ import { requestResponseText, requestResponseTypeParser } from "~functions/Event
 import { requestResponseUpdate } from "~actions/request_response_info";
 import { requestResponseReject, requestResponseAccept } from "~actions/request_response";
 import { actions as applicationActions } from "~store/application";
+import { AppDispatch, ReduxState } from "~store/index";
 
 const styles: any = {
     btn: {},
@@ -54,8 +55,14 @@ const styles: any = {
     }
 };
 
-class RequestResponseInfo extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class RequestResponseInfo extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -431,7 +438,7 @@ class RequestResponseInfo extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         limitedPermissions: state.user.limited_permissions,
@@ -451,8 +458,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         applicationSetPDFMode: enabled => dispatch(applicationActions.setPdfMode(enabled)),
 
diff --git a/src/pages/RuleDashboard/RuleDashboard.tsx b/src/pages/RuleDashboard/RuleDashboard.tsx
index 25cbbcea..b43190e8 100644
--- a/src/pages/RuleDashboard/RuleDashboard.tsx
+++ b/src/pages/RuleDashboard/RuleDashboard.tsx
@@ -7,11 +7,13 @@ import Divider from "@material-ui/core/Divider";
 import Paper from "@material-ui/core/Paper";
 import Button from "@material-ui/core/Button";
 import List from "@material-ui/core/List";
+import { AppWindow } from "~app";
 
 import FileUploadIcon from "~components/CustomSVG/FileUpload";
 import FileDownloadIcon from "~components/CustomSVG/FileDownload";
 import AddIcon from "@material-ui/icons/Add";
 import BookmarkIcon from "@material-ui/icons/Bookmark";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import RuleCollectionItem from "./RuleCollectionItem";
 import NavLink from "~components/Routing/NavLink";
@@ -22,9 +24,6 @@ import RuleCollection from "~types/RuleCollection";
 
 import { actions as snackbarActions } from "~store/snackbar";
 import { actions as categoryRulesActions } from "~store/categoryRules";
-import { actions as categoriesActions } from "~store/categories";
-
-import Bookmark from "@material-ui/icons/Bookmark";
 
 const styles = {
     paper: {
@@ -38,8 +37,15 @@ const styles = {
     }
 };
 
-class RuleDashboard extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+    t: AppWindow["t"];
+}
+
+class RuleDashboard extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -199,14 +205,14 @@ class RuleDashboard extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         categories: state.categories.categories,
-        categoryRules: state.category_rules.category_rules
+        categoryRules: state.categoryRules.category_rules
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
         setCategoryRule: rule_collection => dispatch(categoryRulesActions.setRule(rule_collection))
diff --git a/src/pages/RulePage/RulePage.tsx b/src/pages/RulePage/RulePage.tsx
index 41b69517..d08bc4cb 100644
--- a/src/pages/RulePage/RulePage.tsx
+++ b/src/pages/RulePage/RulePage.tsx
@@ -5,16 +5,23 @@ import Helmet from "react-helmet";
 import Grid from "@material-ui/core/Grid";
 import Button from "@material-ui/core/Button";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import RuleCreator from "./RuleCreator";
-import RuleCollection from "~types/RuleCollection";
+import RuleCollection from "~models/RuleCollection";
 import RuleCollectionPreview from "./RuleCollectionPreview";
 
 import { actions as categoryRulesActions } from "~store/categoryRules";
 import { actions as snackbarActions } from "~store/snackbar";
 
-class RulesPage extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class RulesPage extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -145,7 +152,7 @@ class RulesPage extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         accounts: state.accounts.accounts,
 
@@ -160,13 +167,13 @@ const mapStateToProps = state => {
 
         requestResponses: state.request_responses.request_responses,
         payments: state.payments.payments,
-        bunqMeTabs: state.bunq_me_tabs.bunq_me_tabs,
+        bunqMeTabs: state.bunqMeTabs.bunq_me_tabs,
         masterCardActions: state.master_card_actions.master_card_actions,
         requestInquiries: state.request_inquiries.request_inquiries
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
         setCategoryRule: rule_collection => dispatch(categoryRulesActions.setRule(rule_collection)),
diff --git a/src/pages/SavingsGoalPage/SavingsGoalPage.tsx b/src/pages/SavingsGoalPage/SavingsGoalPage.tsx
index b362c097..6d3aa7c9 100644
--- a/src/pages/SavingsGoalPage/SavingsGoalPage.tsx
+++ b/src/pages/SavingsGoalPage/SavingsGoalPage.tsx
@@ -10,6 +10,7 @@ import Button from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
 
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import SavingsGoalForm from "./SavingsGoalForm";
 import ExportDialog from "~components/ExportDialog";
@@ -36,8 +37,14 @@ const styles = {
     }
 };
 
-class SavingsGoalPage extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class SavingsGoalPage extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -171,7 +178,7 @@ class SavingsGoalPage extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         savingsGoals: state.savings_goals.savings_goals,
 
@@ -183,7 +190,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
         setSavingsGoal: savingsGoal => dispatch(setSavingsGoal(savingsGoal)),
diff --git a/src/pages/SavingsGoalPage/renderAmountFieldCustom.tsx b/src/pages/SavingsGoalPage/renderAmountFieldCustom.tsx
index 2e6867ba..205c6551 100644
--- a/src/pages/SavingsGoalPage/renderAmountFieldCustom.tsx
+++ b/src/pages/SavingsGoalPage/renderAmountFieldCustom.tsx
@@ -11,6 +11,7 @@ import TranslateTypography from "~components/TranslationHelpers/Typography";
 import TranslateButton from "~components/TranslationHelpers/Button";
 import MoneyFormatInput from "~components/FormFields/MoneyFormatInput";
 import { calculateTotalBalance } from "~components/SavingsGoals/Helpers";
+import { ReduxState } from "~store/index";
 
 const formSelector = formValueSelector("savingsGoal");
 
@@ -37,6 +38,9 @@ const handleChangeFormatted = onChange => valueObject => {
     onChange(onChangeValue);
 };
 
+interface IProps {
+}
+
 const renderTextField = ({
     t,
     i18n,
@@ -51,7 +55,7 @@ const renderTextField = ({
     formStyle = {},
     meta: { touched, error },
     ...custom
-}) => {
+}: ReturnType<typeof mapStateToProps> & IProps) => {
     const { onChange, onBlur, onFocus, onDrop, ...restInputProps } = input;
 
     const errorStyle = { color: error ? "#ec2616" : "" };
@@ -96,7 +100,7 @@ const renderTextField = ({
     );
 };
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         accountIds: formSelector(state, "account_ids"),
         accounts: state.accounts.accounts,
diff --git a/src/pages/SavingsGoals/SavingsGoals.tsx b/src/pages/SavingsGoals/SavingsGoals.tsx
index 3eb0483e..d0e218f2 100644
--- a/src/pages/SavingsGoals/SavingsGoals.tsx
+++ b/src/pages/SavingsGoals/SavingsGoals.tsx
@@ -19,6 +19,7 @@ import ImportDialog from "~components/ImportDialog";
 import SavingsGoal from "~models/SavingsGoal";
 
 import { setSavingsGoal } from "~actions/savings_goals";
+import { AppDispatch, ReduxState } from "~store/index";
 import { actions as snackbarActions } from "~store/snackbar";
 
 const styles = {
@@ -33,8 +34,14 @@ const styles = {
     }
 };
 
-class SavingsGoals extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class SavingsGoals extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -147,13 +154,13 @@ class SavingsGoals extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         savingsGoals: state.savings_goals.savings_goals
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: message => dispatch(snackbarActions.open({ message })),
         setSavingsGoal: rule_collection => dispatch(setSavingsGoal(rule_collection))
diff --git a/src/pages/ScheduledPayments/ScheduledPayments.tsx b/src/pages/ScheduledPayments/ScheduledPayments.tsx
index 4313ad06..dbcdba60 100644
--- a/src/pages/ScheduledPayments/ScheduledPayments.tsx
+++ b/src/pages/ScheduledPayments/ScheduledPayments.tsx
@@ -13,6 +13,7 @@ import CircularProgress from "@material-ui/core/CircularProgress";
 import RefreshIcon from "@material-ui/icons/Refresh";
 import InvisibleIcon from "@material-ui/icons/VisibilityOff";
 import VisibleIcon from "@material-ui/icons/Visibility";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import ScheduledPaymentItem from "./ScheduledPaymentItem";
 import ScheduledPaymentsEditDialog from "./ScheduledPaymentsEditDialog";
@@ -36,8 +37,14 @@ const styles: any = {
     }
 };
 
-class ScheduledPayments extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class ScheduledPayments extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -181,22 +188,21 @@ class ScheduledPayments extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
-        user: state.user.user,
-        accountsAccountId: state.accounts.selected_account,
-
-        scheduledPaymentsLoading: state.scheduled_payments.loading,
-        scheduledPayments: state.scheduled_payments.scheduled_payments
+        openSnackbar: message => dispatch(snackbarActions.open({ message })),
+        scheduledPaymentsInfoUpdate: (userId, accountId) =>
+            dispatch(scheduledPaymentsInfoUpdate(userId, accountId))
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapStateToProps = (state: ReduxState) => {
     return {
-        openSnackbar: message => dispatch(snackbarActions.open({ message })),
-        scheduledPaymentsInfoUpdate: (userId, accountId) =>
-            dispatch(scheduledPaymentsInfoUpdate(userId, accountId))
+        user: state.user.user,
+        accountsAccountId: state.accounts.selectedAccount,
+
+        scheduledPaymentsLoading: state.scheduled_payments.loading,
+        scheduledPayments: state.scheduled_payments.scheduled_payments
     };
 };
 
diff --git a/src/pages/ScheduledPayments/ScheduledPaymentsEditDialog.tsx b/src/pages/ScheduledPayments/ScheduledPaymentsEditDialog.tsx
index 0e3c75f9..93b676b1 100644
--- a/src/pages/ScheduledPayments/ScheduledPaymentsEditDialog.tsx
+++ b/src/pages/ScheduledPayments/ScheduledPaymentsEditDialog.tsx
@@ -16,6 +16,7 @@ import SchedulePaymentForm from "~components/FormFields/SchedulePaymentForm";
 import AttachmentImage from "~components/AttachmentImage/AttachmentImage";
 
 import { scheduledPaymentUpdate } from "~actions/scheduled_payments";
+import { AppDispatch, ReduxState } from "~store/index";
 
 const styles = {
     textField: {
@@ -31,7 +32,15 @@ const styles = {
     }
 };
 
-class ScheduledPaymentsEditDialog extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class ScheduledPaymentsEditDialog extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -239,19 +248,18 @@ class ScheduledPaymentsEditDialog extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         limitedPermissions: state.user.limited_permissions,
 
         scheduledPaymentsLoading: state.scheduled_payments.loading,
         scheduledPayments: state.scheduled_payments.scheduled_payments,
-        selectedAccount: state.accounts.selected_account
+        selectedAccount: state.accounts.selectedAccount
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         scheduledPaymentUpdate: (...params) => dispatch(scheduledPaymentUpdate(...params))
     };
diff --git a/src/pages/Settings/EditPasswordForm.tsx b/src/pages/Settings/EditPasswordForm.tsx
index a128f1aa..fa15f6e6 100644
--- a/src/pages/Settings/EditPasswordForm.tsx
+++ b/src/pages/Settings/EditPasswordForm.tsx
@@ -8,6 +8,7 @@ import TranslateTypography from "~components/TranslationHelpers/Typography";
 import TranslateButton from "~components/TranslationHelpers/Button";
 
 import { registrationChangePassword } from "~actions/registration";
+import { AppDispatch, ReduxState } from "~store/index";
 
 const styles = {
     textField: {
@@ -19,7 +20,15 @@ const styles = {
     }
 };
 
-class EditPasswordForm extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class EditPasswordForm extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -80,13 +89,13 @@ class EditPasswordForm extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         registrationReady: state.registration.ready
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         registrationChangePassword: newPassword => dispatch(registrationChangePassword(newPassword))
     };
diff --git a/src/pages/Settings/Settings.tsx b/src/pages/Settings/Settings.tsx
index dafc1705..4c5f533a 100644
--- a/src/pages/Settings/Settings.tsx
+++ b/src/pages/Settings/Settings.tsx
@@ -26,6 +26,7 @@ import HomeIcon from "@material-ui/icons/Home";
 
 import path from "~importwrappers/path";
 import { getPrettyLanguage } from "~functions/Utils";
+import { AppDispatch, ReduxState } from "~store/index";
 
 const packageInfo = require("../../../../package.json");
 const SUPPORTED_LANGUAGES = packageInfo.supported_languages;
@@ -101,8 +102,14 @@ const humanReadableThemes = {
     DarkTheme: "Dark theme"
 };
 
-class Settings extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class Settings extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -673,7 +680,7 @@ class Settings extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         syncOnStartup: state.options.sync_on_startup,
         theme: state.options.theme,
@@ -690,7 +697,7 @@ const mapStateToProps = state => {
 
         payments: state.payments.payments,
         scheduledPayments: state.scheduled_payments.scheduled_payments,
-        bunqMeTabs: state.bunq_me_tabs.bunq_me_tabs,
+        bunqMeTabs: state.bunqMeTabs.bunq_me_tabs,
         masterCardActions: state.master_card_actions.master_card_actions,
         requestInquiries: state.request_inquiries.request_inquiries,
         requestInquiryBatches: state.request_inquiry_batches.request_inquiry_batches,
@@ -707,8 +714,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = (dispatch, ownProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         // options and options_drawer handlers
         setSyncOnStartup: syncOnStartup => dispatch(setSyncOnStartup(syncOnStartup)),
diff --git a/src/pages/Stats/Stats.tsx b/src/pages/Stats/Stats.tsx
index daf1095c..b98eb109 100644
--- a/src/pages/Stats/Stats.tsx
+++ b/src/pages/Stats/Stats.tsx
@@ -13,6 +13,7 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
 import AccountList from "~components/AccountList/AccountList";
 import ClearBtn from "~components/FilterComponents/ClearFilter";
 import FilterDrawer from "~components/FilterComponents/FilterDrawer";
+import { AppDispatch, ReduxState } from "~store/index";
 
 import ChartTitle from "./ChartTitle";
 import EventCountSection from "./EventCountSection";
@@ -31,8 +32,14 @@ const styles: any = {
     }
 };
 
-class Stats extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+}
+
+class Stats extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -400,18 +407,18 @@ class Stats extends React.Component<any> {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
 
         payments: state.payments.payments,
-        bunqMeTabs: state.bunq_me_tabs.bunq_me_tabs,
+        bunqMeTabs: state.bunqMeTabs.bunq_me_tabs,
         requestInquiries: state.request_inquiries.request_inquiries,
         requestResponses: state.request_responses.request_responses,
         masterCardActions: state.master_card_actions.master_card_actions,
 
         paymentsLoading: state.payments.loading,
-        bunqMeTabsLoading: state.bunq_me_tabs.loading,
+        bunqMeTabsLoading: state.bunqMeTabs.loading,
         requestInquiriesLoading: state.request_inquiries.loading,
         requestResponsesLoading: state.request_responses.loading,
         masterCardActionsLoading: state.master_card_actions.loading,
@@ -422,29 +429,29 @@ const mapStateToProps = state => {
         paymentType: state.payment_filter.type,
         paymentVisibility: state.payment_filter.visible,
 
-        bunqMeTabType: state.bunq_me_tab_filter.type,
-        bunqMeTabVisibility: state.bunq_me_tab_filter.visible,
+        bunqMeTabType: state.bunqMeTabFilter.type,
+        bunqMeTabVisibility: state.bunqMeTabFilter.visible,
 
         requestType: state.request_filter.type,
         requestVisibility: state.request_filter.visible,
 
-        dateFromFilter: state.date_filter.from_date,
-        dateToFilter: state.date_filter.to_date,
+        dateFromFilter: state.dateFilter.from_date,
+        dateToFilter: state.dateFilter.to_date,
         generalFilterDate: state.general_filter.date,
 
-        selectedAccountIds: state.account_id_filter.selected_account_ids,
-        toggleAccountIds: state.account_id_filter.toggle,
-        selectedCategories: state.category_filter.selected_categories,
-        toggleCategoryIds: state.category_filter.toggle,
-        selectedCardIds: state.card_id_filter.selected_card_ids,
-        toggleCardIds: state.card_id_filter.toggle,
+        selectedAccountIds: state.accountIdFilter.selected_account_ids,
+        toggleAccountIds: state.accountIdFilter.toggle,
+        selectedCategories: state.categoryFilter.selected_categories,
+        toggleCategoryIds: state.categoryFilter.toggle,
+        selectedCardIds: state.cardIdFilter.selected_card_ids,
+        toggleCardIds: state.cardIdFilter.toggle,
 
-        amountFilterAmount: state.amount_filter.amount,
-        amountFilterType: state.amount_filter.type
+        amountFilterAmount: state.amountFilter.amount,
+        amountFilterType: state.amountFilter.type
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {};
 };
 
diff --git a/src/pages/SwitchApiKeys.tsx b/src/pages/SwitchApiKeys.tsx
index 589967ce..b8804b99 100644
--- a/src/pages/SwitchApiKeys.tsx
+++ b/src/pages/SwitchApiKeys.tsx
@@ -19,6 +19,7 @@ import RemoveIcon from "@material-ui/icons/Delete";
 import TranslateTypography from "~components/TranslationHelpers/Typography";
 
 import { registrationRemoveStoredApiKey, registrationSwitchStoredApiKey } from "~actions/registration";
+import { AppDispatch, ReduxState } from "~store/index";
 
 const styles = {
     wrapperContainer: {
@@ -36,7 +37,15 @@ const styles = {
     }
 };
 
-class SwitchApiKeys extends React.Component {
+interface IState {
+}
+
+interface IProps {
+}
+
+class SwitchApiKeys extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -125,7 +134,7 @@ class SwitchApiKeys extends React.Component {
     }
 }
 
-const mapStateToProps = state => {
+const mapStateToProps = (state: ReduxState) => {
     return {
         status_message: state.application.status_message,
 
@@ -141,7 +150,7 @@ const mapStateToProps = state => {
     };
 };
 
-const mapDispatchToProps = dispatch => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         // attempt to load the api key with our password if one is stored
         registrationSwitchStoredApiKey: index => dispatch(registrationSwitchStoredApiKey(index)),

From b813955f40ac0fc56160b3b154ccb179a218ae67 Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 14:34:35 +0100
Subject: [PATCH 11/26] fix: restore stats worker

---
 src/pages/Stats/Stats.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Stats/Stats.tsx b/src/pages/Stats/Stats.tsx
index b98eb109..4b576e42 100644
--- a/src/pages/Stats/Stats.tsx
+++ b/src/pages/Stats/Stats.tsx
@@ -23,7 +23,7 @@ import EventHistorySection from "./EventHistorySection";
 import CategoryCountHistoryChart from "./Chart/Timeline/CategoryCountHistoryChart";
 import CategoryTransactionHistoryChart from "./Chart/Timeline/CategoryTransactionHistoryChart";
 
-const StatsWorker = require("~webworkers/stats.worker.js");
+const StatsWorker = require("worker-loader!../../webworkers/stats.worker.js");
 
 const styles: any = {
     sideBarPaper: {

From 2c946205e6295a9d5309e0d293c9b1060a24c206 Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 14:39:11 +0100
Subject: [PATCH 12/26] fix: rule dashboard

---
 src/pages/RuleDashboard/RuleCollectionItem.tsx | 18 +++++++++++++++---
 src/pages/RuleDashboard/RuleDashboard.tsx      | 11 +++++++----
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/pages/RuleDashboard/RuleCollectionItem.tsx b/src/pages/RuleDashboard/RuleCollectionItem.tsx
index 7cf16caf..29ba65dc 100644
--- a/src/pages/RuleDashboard/RuleCollectionItem.tsx
+++ b/src/pages/RuleDashboard/RuleCollectionItem.tsx
@@ -3,12 +3,22 @@ import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import Divider from "@material-ui/core/Divider";
+import { AppWindow } from "~app";
 
 import NavLink from "~components/Routing/NavLink";
 import CategoryIcon from "~components/Categories/CategoryIcon";
+import RuleCollection from "~models/RuleCollection";
 
-class RuleCollectionItem extends React.Component<any> {
-    state: any;
+interface IState {
+}
+
+interface IProps {
+    ruleCollection: RuleCollection;
+    t: AppWindow["t"];
+}
+
+class RuleCollectionItem extends React.Component<IProps> {
+    state: IState;
 
     constructor(props, context) {
         super(props, context);
@@ -17,7 +27,9 @@ class RuleCollectionItem extends React.Component<any> {
 
     render() {
         const { ruleCollection, categories, t } = this.props;
-        if (!ruleCollection) return null;
+        if (!ruleCollection) {
+            return null;
+        }
 
         const categoryIds = ruleCollection.getCategories();
 
diff --git a/src/pages/RuleDashboard/RuleDashboard.tsx b/src/pages/RuleDashboard/RuleDashboard.tsx
index b43190e8..9fb3daa8 100644
--- a/src/pages/RuleDashboard/RuleDashboard.tsx
+++ b/src/pages/RuleDashboard/RuleDashboard.tsx
@@ -20,7 +20,7 @@ import NavLink from "~components/Routing/NavLink";
 import ExportDialog from "~components/ExportDialog";
 import ImportDialog from "~components/ImportDialog";
 import TranslateTypography from "~components/TranslationHelpers/Typography";
-import RuleCollection from "~types/RuleCollection";
+import RuleCollection from "~models/RuleCollection";
 
 import { actions as snackbarActions } from "~store/snackbar";
 import { actions as categoryRulesActions } from "~store/categoryRules";
@@ -112,9 +112,12 @@ class RuleDashboard extends React.Component<ReturnType<typeof mapStateToProps> &
     render() {
         const { categoryRules, categories, t } = this.props;
 
-        const categoryRulesList = Object.keys(categoryRules).map(categoryRuleId => (
-            <RuleCollectionItem ruleCollection={categoryRules[categoryRuleId]} categories={categories} t={t}/>
-        ));
+        const categoryRulesList = Object.keys(categoryRules).map((categoryRuleId, idx) => {
+            const ruleCollection = new RuleCollection();
+            ruleCollection.fromObject(categoryRules[categoryRuleId]);
+
+            return <RuleCollectionItem key={idx} ruleCollection={ruleCollection} categories={categories} t={t}/>;
+        });
         const categoryRulesArray = Object.values(categoryRules);
 
         return (

From cd571aa38d9fd1145e242270a471d075875171dc Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 14:44:52 +0100
Subject: [PATCH 13/26] fix: Profile page

---
 src/pages/Profile/Profile.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
index d69049d8..639a084c 100644
--- a/src/pages/Profile/Profile.tsx
+++ b/src/pages/Profile/Profile.tsx
@@ -15,10 +15,12 @@ import Chip from "@material-ui/core/Chip";
 
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import UrlIcon from "@material-ui/icons/Link";
+import { AppWindow } from "~app";
 
 import AliasList from "~components/AliasList";
 import UploadFullscreen from "~components/FileUpload/UploadFullscreen";
 import LazyAttachmentImage from "~components/AttachmentImage/LazyAttachmentImage";
+import MonetaryAccount from "~models/MonetaryAccount";
 import { AppDispatch, ReduxState } from "~store/index";
 import NotificationFilters from "./NotificationFilters";
 import ProfileDetailsForm from "./ProfileDetailsForm";
@@ -33,6 +35,8 @@ import { ListItemSecondaryAction } from "@material-ui/core";
 
 import { actions as snackbarActions } from "~store/snackbar";
 
+declare let window: AppWindow;
+
 const styles: any = {
     title: {
         marginBottom: 8
@@ -69,6 +73,7 @@ interface IState {
 }
 
 interface IProps {
+    t: AppWindow["t"];
 }
 
 class Profile extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -121,7 +126,8 @@ class Profile extends React.Component<ReturnType<typeof mapStateToProps> & Retur
 
     calculateTotalBalance = () => {
         return this.props.accounts.reduce((total, account) => {
-            return total + account.getBalance();
+            const monetaryAccount = new MonetaryAccount(account);
+            return total + monetaryAccount.getBalance();
         }, 0);
     };
 
@@ -159,9 +165,10 @@ class Profile extends React.Component<ReturnType<typeof mapStateToProps> & Retur
     };
 
     updateSettings = data => {
+        const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
         const { address_postal, address_main, public_nick_name } = data;
 
-        const { t, user, userType, BunqJSClient } = this.props;
+        const { t, user, userType } = this.props;
         const errorMessage = t("We failed to update your user information");
         this.setState({ loading: true });
 

From b170dced2b8b244b01544723835fd07a722e51d9 Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 14:54:31 +0100
Subject: [PATCH 14/26] chore: cleanup remaining BunqJSClients from props

---
 src/components/AccountList/AccountList.tsx     |  3 +--
 src/components/AccountList/AccountListItem.tsx |  1 -
 src/components/Layout.tsx                      |  7 +++++--
 src/components/Queue/QueueManager.tsx          | 15 +++++++--------
 src/pages/BunqMeTab/BunqMeTabForm.tsx          |  1 -
 src/pages/Exports.tsx                          |  4 ++++
 6 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/AccountList/AccountList.tsx b/src/components/AccountList/AccountList.tsx
index dfe396be..c45cb941 100644
--- a/src/components/AccountList/AccountList.tsx
+++ b/src/components/AccountList/AccountList.tsx
@@ -340,8 +340,7 @@ const mapStateToProps = (state: ReduxState) => {
     };
 };
 
-const mapDispatchToProps = (dispatch: AppDispatch, ownProps: IProps) => {
-    const { BunqJSClient } = ownProps;
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         paymentsUpdate: (userId, accountId) => dispatch(paymentInfoUpdate(userId, accountId)),
         requestInquiriesUpdate: (userId, accountId) =>
diff --git a/src/components/AccountList/AccountListItem.tsx b/src/components/AccountList/AccountListItem.tsx
index 4f2593a8..0b26ad9c 100644
--- a/src/components/AccountList/AccountListItem.tsx
+++ b/src/components/AccountList/AccountListItem.tsx
@@ -191,7 +191,6 @@ const mapStateToProps = (state: ReduxState) => {
 };
 
 const mapDispatchToProps = (dispatch: AppDispatch, ownProps: IProps) => {
-    const { BunqJSClient } = ownProps;
     return {
         selectAccount: accountId => dispatch(accountsActions.selectAccount(accountId)),
 
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 8be72e34..81bfd2ba 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -349,11 +349,14 @@ const mapStateToProps = (state: ReduxState) => {
 };
 
 const mapDispatchToProps = (dispatch: AppDispatch, ownProps: IProps) => {
-    const { BunqJSClient } = ownProps;
     return {
         openSnackbar: (message, duration = 4000) => dispatch(openSnackbar({ message, duration })),
         openModal: (message, title) => dispatch(openModal(message, title)),
-        BunqErrorHandler: (error, customError = false) => BunqErrorHandler(dispatch, error, customError),
+        BunqErrorHandler: (error, customError = false) => {
+            const actions = [];
+            BunqErrorHandler(actions, error, customError);
+            dispatch(actions);
+        },
 
         // options
         setAutomaticThemeChange: automaticThemeChange => dispatch(setAutomaticThemeChange(automaticThemeChange)),
diff --git a/src/components/Queue/QueueManager.tsx b/src/components/Queue/QueueManager.tsx
index 65f3b44d..de7fae06 100644
--- a/src/components/Queue/QueueManager.tsx
+++ b/src/components/Queue/QueueManager.tsx
@@ -840,7 +840,6 @@ const mapStateToProps = (state: ReduxState) => {
 };
 
 const mapDispatchToProps = (dispatch: AppDispatch, ownProps: IProps) => {
-    const { BunqJSClient } = ownProps;
     return {
         openSnackbar: (message, duration = 4000) => dispatch(snackbarActions.open({ message, duration })),
 
@@ -851,7 +850,7 @@ const mapDispatchToProps = (dispatch: AppDispatch, ownProps: IProps) => {
         queueFinishedSync: () => dispatch(queueFinishedSync()),
         queueResetSyncState: () => dispatch(queueResetSyncState()),
 
-        paymentsSetInfo: (payments, accountId) => dispatch(paymentsSetInfo(payments, accountId, false, BunqJSClient)),
+        paymentsSetInfo: (payments, accountId) => dispatch(paymentsSetInfo(payments, accountId, false)),
         bunqMeTabsSetInfo: (bunqMeTabs, accountId) =>
             dispatch(bunqMeTabsActions.setInfo({
                 bunqMeTabs,
@@ -859,17 +858,17 @@ const mapDispatchToProps = (dispatch: AppDispatch, ownProps: IProps) => {
                 resetOldItems: false,
             })),
         masterCardActionsSetInfo: (masterCardActions, accountId) =>
-            dispatch(masterCardActionsSetInfo(masterCardActions, accountId, false, BunqJSClient)),
+            dispatch(masterCardActionsSetInfo(masterCardActions, accountId, false)),
         requestInquiriesSetInfo: (requestInquiries, accountId) =>
-            dispatch(requestInquiriesSetInfo(requestInquiries, accountId, false, BunqJSClient)),
+            dispatch(requestInquiriesSetInfo(requestInquiries, accountId, false)),
         requestInquiryBatchesSetInfo: (requestInquiryBatches, accountId) =>
-            dispatch(requestInquiryBatchesSetInfo(requestInquiryBatches, accountId, false, BunqJSClient)),
+            dispatch(requestInquiryBatchesSetInfo(requestInquiryBatches, accountId, false)),
         requestResponsesSetInfo: (requestResponses, accountId) =>
-            dispatch(requestResponsesSetInfo(requestResponses, accountId, false, BunqJSClient)),
+            dispatch(requestResponsesSetInfo(requestResponses, accountId, false)),
         shareInviteBankInquiriesSetInfo: (shareInviteBankInquiries, accountId) =>
-            dispatch(shareInviteBankInquiriesSetInfo(shareInviteBankInquiries, accountId, BunqJSClient)),
+            dispatch(shareInviteBankInquiriesSetInfo(shareInviteBankInquiries, accountId)),
         shareInviteMonetaryAccountResponsesSetInfo: shareInviteMonetaryAccountResponses =>
-            dispatch(shareInviteMonetaryAccountResponsesSetInfo(shareInviteMonetaryAccountResponses, BunqJSClient))
+            dispatch(shareInviteMonetaryAccountResponsesSetInfo(shareInviteMonetaryAccountResponses))
     };
 };
 
diff --git a/src/pages/BunqMeTab/BunqMeTabForm.tsx b/src/pages/BunqMeTab/BunqMeTabForm.tsx
index 3b5f59fc..93c20d43 100644
--- a/src/pages/BunqMeTab/BunqMeTabForm.tsx
+++ b/src/pages/BunqMeTab/BunqMeTabForm.tsx
@@ -226,7 +226,6 @@ const mapStateToProps = state => {
 };
 
 const mapDispatchToProps = (dispatch, props) => {
-    const { BunqJSClient } = props;
     return {
         bunqMeTabSend: (userId, accountId, description, amount, options) =>
             dispatch(bunqMeTabSend(userId, accountId, description, amount, options)),
diff --git a/src/pages/Exports.tsx b/src/pages/Exports.tsx
index 0118b290..eaef653d 100644
--- a/src/pages/Exports.tsx
+++ b/src/pages/Exports.tsx
@@ -30,6 +30,7 @@ import FolderIcon from "@material-ui/icons/Folder";
 import RefreshIcon from "@material-ui/icons/Refresh";
 
 import { shell } from "electron";
+import { AppWindow } from "~app";
 const remote = require("electron").remote;
 const app = remote ? remote.app : {};
 import fs from "~importwrappers/fs";
@@ -51,6 +52,8 @@ import { exportInfoUpdate } from "~store/exports/thunks";
 import { AppDispatch, ReduxState } from "~store/index";
 import { actions as snackbarActions } from "~store/snackbar";
 
+declare let window: AppWindow;
+
 const escapeCsv = val => `"${val.replace('"', '"""')}"`;
 
 const styles = {
@@ -76,6 +79,7 @@ interface IState {
 }
 
 interface IProps {
+    t: AppWindow["t"];
 }
 
 class Exports extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {

From 4b804f12e3ea33aa01e3d884eb92e0f7885b0526 Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 15:21:42 +0100
Subject: [PATCH 15/26] fix: MonetaryAccount serialization

---
 src/components/AccountList/AccountList.tsx |  4 ++--
 src/models/MonetaryAccount.ts              | 28 +++++++++++++++++++++-
 src/store/accounts/index.ts                | 16 +++++--------
 src/store/accounts/thunks.ts               |  7 +++++-
 src/store/exports/index.ts                 |  2 +-
 src/store/exports/thunks.ts                |  9 +++----
 6 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/src/components/AccountList/AccountList.tsx b/src/components/AccountList/AccountList.tsx
index c45cb941..8fd8a060 100644
--- a/src/components/AccountList/AccountList.tsx
+++ b/src/components/AccountList/AccountList.tsx
@@ -89,7 +89,7 @@ class AccountList extends React.Component<ReturnType<typeof mapStateToProps> & R
             .reduce((total, account) => {
                 const accountTrayItem = {
                     description: account.description,
-                    balance: formatMoney(account.getBalance())
+                    balance: formatMoney(account.balance.value)
                 };
 
                 if (account.balance) {
@@ -217,7 +217,7 @@ class AccountList extends React.Component<ReturnType<typeof mapStateToProps> & R
         const { accountTotalSelectionMode } = this.state;
 
         let accounts = [];
-        if (this.props.accounts !== false) {
+        if (this.props.accounts.length) {
             accounts = this.props.accounts
                 .filter(account => {
                     if (account && account.status !== "ACTIVE") {
diff --git a/src/models/MonetaryAccount.ts b/src/models/MonetaryAccount.ts
index d6048b23..91b956c1 100644
--- a/src/models/MonetaryAccount.ts
+++ b/src/models/MonetaryAccount.ts
@@ -73,7 +73,33 @@ export default class MonetaryAccount {
     }
 
     public toPlainObject(): IMonetaryAccount {
-        return JSON.parse(this._rawData);
+        return JSON.parse(JSON.stringify({
+            accountType: this._accountType,
+            id: this._id,
+            created: this._created,
+            updated: this._updated,
+            avatar: this._avatar,
+            currency: this._currency,
+            description: this._description,
+            daily_limit: this._daily_limit,
+            daily_spent: this._daily_spent,
+            overdraft_limit: this._overdraft_limit,
+            balance: this._balance,
+            alias: this._alias,
+            public_uuid: this._public_uuid,
+            status: this._status,
+            sub_status: this._sub_status,
+            user_id: this._user_id,
+            monetary_account_profile: this._monetary_account_profile,
+            notification_filters: this._notification_filters,
+            setting: this._setting,
+
+            savings_goal: this._savings_goal,
+            savings_goal_progress: this._savings_goal_progress,
+
+            // only available on MonetaryAccountJoint objects
+            all_co_owner: this._all_co_owner,
+        }));
     }
 
     /**
diff --git a/src/store/accounts/index.ts b/src/store/accounts/index.ts
index 0f32ad14..ee8b9f50 100644
--- a/src/store/accounts/index.ts
+++ b/src/store/accounts/index.ts
@@ -6,6 +6,8 @@ import { AppWindow } from "~app";
 import { EXCLUDED_ACCOUNT_IDS, SELECTED_ACCOUNT_LOCATION, STORED_ACCOUNTS } from "~misc/consts";
 import { formatMoney } from "~functions/Utils";
 import settings from "~importwrappers/electronSettings";
+import MonetaryAccount from "~models/MonetaryAccount";
+import { IMonetaryAccount } from "~types/MonetaryAccount";
 
 declare let window: AppWindow;
 
@@ -16,7 +18,7 @@ const selectedAccountDefault: number | boolean = selectedAccountStored !== undef
 const excludedAccountIdsDefault: Array<number> = excludedAccountIdsStored !== undefined ? excludedAccountIdsStored : [];
 
 export interface ISetInfoPayload {
-    accounts: any;
+    accounts: Array<IMonetaryAccount>;
 }
 
 const setInfoAction = createAction("setInfo");
@@ -69,23 +71,17 @@ const slice = createSlice({
     reducers: {
         [setInfoAction.type](state, action: PayloadAction<ISetInfoPayload>) {
             const BunqDesktopClient = window.BunqDesktopClient;
-            BunqDesktopClient.storeEncrypt(
-                {
-                    items: action.payload.accounts
-                },
-                STORED_ACCOUNTS
-            ).then();
-
+            BunqDesktopClient.storeEncrypt({ items: action.payload.accounts }, STORED_ACCOUNTS).then();
             ipcRenderer.send(
                 "set-tray-accounts",
                 action.payload.accounts
                     .filter(account => {
                         return account && account.status === "ACTIVE";
                     })
-                    .map(account => {
+                    .map((account) => {
                         return {
                             description: account.description,
-                            balance: formatMoney(account.getBalance())
+                            balance: formatMoney((new MonetaryAccount(account)).getBalance())
                         };
                     })
             );
diff --git a/src/store/accounts/thunks.ts b/src/store/accounts/thunks.ts
index 90606dc0..bf25f0b4 100644
--- a/src/store/accounts/thunks.ts
+++ b/src/store/accounts/thunks.ts
@@ -3,7 +3,9 @@ import { AppWindow } from "~app";
 
 import BunqErrorHandler from "~functions/BunqErrorHandler";
 import { STORED_ACCOUNTS } from "~misc/consts";
+import MonetaryAccount from "~models/MonetaryAccount";
 import { AppDispatch, BatchedActions } from "~store/index";
+import { IMonetaryAccount } from "~types/MonetaryAccount";
 import { actions } from "./index";
 import { actions as snackbarActions } from "../snackbar";
 
@@ -30,7 +32,10 @@ export function accountsUpdate(userId): ThunkAction<any, any, any, any> {
         dispatch(actions.isLoading());
         const batchedActions = [];
         try {
-            batchedActions.push(actions.setInfo({ accounts: await BunqJSClient.api.monetaryAccount.list(userId) }));
+            const accounts: Array<IMonetaryAccount> = (await BunqJSClient.api.monetaryAccount.list(userId)).map((account) => {
+                return new MonetaryAccount(account).toPlainObject() as IMonetaryAccount;
+            });
+            batchedActions.push(actions.setInfo({ accounts }));
         } catch (error) {
             BunqErrorHandler(batchedActions, error, failedMessage);
         } finally {
diff --git a/src/store/exports/index.ts b/src/store/exports/index.ts
index f997a5ca..b1342f94 100644
--- a/src/store/exports/index.ts
+++ b/src/store/exports/index.ts
@@ -1,7 +1,7 @@
 import { createAction, createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 export interface ISetInfoPayload {
-    exports: Array<any>;
+    exports: any;
     user_id: number;
     account_id: number;
 }
diff --git a/src/store/exports/thunks.ts b/src/store/exports/thunks.ts
index b980f4d6..83d845dd 100644
--- a/src/store/exports/thunks.ts
+++ b/src/store/exports/thunks.ts
@@ -6,8 +6,8 @@ import { actions } from "./index";
 declare let window: AppWindow;
 
 export function exportInfoUpdate(
-    user_id,
-    account_id,
+    user_id: number,
+    account_id: number,
     options = {
         count: 200,
         newer_id: false,
@@ -15,18 +15,19 @@ export function exportInfoUpdate(
     }
 ) {
     const failedMessage = window.t("We failed to load the exports for this monetary account");
+    const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
 
     return async (dispatch: AppDispatch) => {
         dispatch(actions.isLoading());
 
         const batchedActions: BatchedActions = [];
         try {
-            const exports = BunqJSClient.api.customerStatementExport.list(user_id, account_id, options);
+            const exports = await BunqJSClient.api.customerStatementExport.list(user_id, account_id, options);
             dispatch(actions.setInfo({ exports, user_id, account_id }));
         } catch (error) {
             BunqErrorHandler(batchedActions, error, failedMessage);
         } finally {
-            dispatch(batchedActions.concat([actions.isNotLoading]));
+            dispatch(batchedActions.concat([actions.isNotLoading()]));
         }
     };
 }

From f9dc9e5c3333f3de22e83804cac90c271c238a7c Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 15:28:48 +0100
Subject: [PATCH 16/26] chore: avoid instantiating MonetaryAccount objects
 where possible

---
 src/components/AccountList/AccountList.tsx | 2 +-
 src/store/accounts/index.ts                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/AccountList/AccountList.tsx b/src/components/AccountList/AccountList.tsx
index 8fd8a060..20e51025 100644
--- a/src/components/AccountList/AccountList.tsx
+++ b/src/components/AccountList/AccountList.tsx
@@ -92,7 +92,7 @@ class AccountList extends React.Component<ReturnType<typeof mapStateToProps> & R
                     balance: formatMoney(account.balance.value)
                 };
 
-                if (account.balance) {
+                if (account?.balance?.value) {
                     if (excludedAccountIds) {
                         const isExcluded = excludedAccountIds.some(
                             excludedAccountId => account.id === excludedAccountId
diff --git a/src/store/accounts/index.ts b/src/store/accounts/index.ts
index ee8b9f50..f1481cf2 100644
--- a/src/store/accounts/index.ts
+++ b/src/store/accounts/index.ts
@@ -81,7 +81,7 @@ const slice = createSlice({
                     .map((account) => {
                         return {
                             description: account.description,
-                            balance: formatMoney((new MonetaryAccount(account)).getBalance())
+                            balance: formatMoney(account.balance.value)
                         };
                     })
             );

From 7d72dc3f576c1ca54675b650566af875d0e7efe5 Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 15:29:38 +0100
Subject: [PATCH 17/26] chore: add BUNQDESKTOP_LANGUAGE_SETTING type to window

---
 src/app.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app.ts b/src/app.ts
index 5f2568ce..8419b06d 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -2,4 +2,4 @@ import "~helpers/context_menu";
 import "~helpers/external_links";
 import BunqDesktopClient from "~components/BunqDesktopClient";
 
-export type AppWindow = Window & { BunqDesktopClient?: BunqDesktopClient; t: Function };
+export type AppWindow = Window & { BunqDesktopClient?: BunqDesktopClient; t: Function; BUNQDESKTOP_LANGUAGE_SETTING: string };

From ef31ffddffb7a459943a6e2b2d865b7f2c32e729 Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 15:44:52 +0100
Subject: [PATCH 18/26] fix: request inquiry serialization

---
 src/Actions/request_inquiries.js         |  6 +--
 src/Reducers/request_inquiries.js        |  2 +-
 src/components/RuleCollectionChecker.tsx |  3 +-
 src/models/RequestInquiry.ts             | 61 ++++++++++++++++++++++++
 src/types/RequestInquiry.ts              | 39 +++++++++++++++
 5 files changed, 106 insertions(+), 5 deletions(-)
 create mode 100644 src/types/RequestInquiry.ts

diff --git a/src/Actions/request_inquiries.js b/src/Actions/request_inquiries.js
index 0fa596ae..73dac221 100644
--- a/src/Actions/request_inquiries.js
+++ b/src/Actions/request_inquiries.js
@@ -24,7 +24,7 @@ export function loadStoredRequestInquiries() {
         BunqDesktopClient.storeDecrypt(STORED_REQUEST_INQUIRIES)
             .then(data => {
                 if (data && data.items) {
-                    const newRequestInquiries = data.items.map(item => new RequestInquiry(item));
+                    const newRequestInquiries = data.items.map(item => (new RequestInquiry(item)).toPlainObject());
                     dispatch(requestInquiriesSetInfo(newRequestInquiries, data.account_id));
                 }
                 dispatch(requestInquiriesNotLoading());
@@ -51,8 +51,8 @@ export function requestInquiriesUpdate(
         BunqJSClient.api.requestInquiry
             .list(userId, accountId, options)
             .then(requestInquiries => {
-                const newRequestInquiries = requestInquiries.map(item => new RequestInquiry(item));
-                dispatch(requestInquiriesSetInfo(newRequestInquiries, accountId, false, BunqJSClient));
+                const newRequestInquiries = requestInquiries.map(item => (new RequestInquiry(item)).toPlainObject());
+                dispatch(requestInquiriesSetInfo(newRequestInquiries, accountId, false));
                 dispatch(requestInquiriesNotLoading());
             })
             .catch(error => {
diff --git a/src/Reducers/request_inquiries.js b/src/Reducers/request_inquiries.js
index 0c676253..f90a0ce0 100644
--- a/src/Reducers/request_inquiries.js
+++ b/src/Reducers/request_inquiries.js
@@ -31,7 +31,7 @@ export default (state = defaultState, action) => {
             );
 
             // limit payments to 1000 in total
-            const mergedRequestInquiries = mergedInfo.items.slice(0, 1000);
+            const mergedRequestInquiries = mergedInfo.items.slice(0, 1000).map(item => item.toPlainObject());
 
             window.BunqDesktopClient.storeEncrypt(
                 {
diff --git a/src/components/RuleCollectionChecker.tsx b/src/components/RuleCollectionChecker.tsx
index a61f19b8..1e44ed1f 100644
--- a/src/components/RuleCollectionChecker.tsx
+++ b/src/components/RuleCollectionChecker.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
+import RequestInquiry from "~models/RequestInquiry";
 
 import { actions as categoriesActions } from "~store/categories";
 import { actions as categoryRulesActions } from "~store/categoryRules";
@@ -70,7 +71,7 @@ class RuleCollectionChecker extends React.Component<ReturnType<typeof mapStateTo
     triggerWorkerEvent = () => {
         // use json format
         const payments = this.props.payments.map(item => item.toJSON());
-        const requestInquiries = this.props.requestInquiries.map(item => item.toJSON());
+        const requestInquiries = this.props.requestInquiries.map(item => new RequestInquiry(item).toJSON());
         const requestResponses = this.props.requestResponses.map(item => item.toJSON());
         const masterCardActions = this.props.masterCardActions.map(item => item.toJSON());
         const bunqMeTabs = this.props.bunqMeTabs.map(item => JSON.stringify(item));
diff --git a/src/models/RequestInquiry.ts b/src/models/RequestInquiry.ts
index bfb96eff..322d032d 100644
--- a/src/models/RequestInquiry.ts
+++ b/src/models/RequestInquiry.ts
@@ -1,3 +1,4 @@
+import { IRequestInquiry } from "~types/RequestInquiry";
 import {
     Address,
     Amount,
@@ -15,6 +16,7 @@ export default class RequestInquiry implements Event {
     private _rawData: any;
 
     public RequestInquiry = this;
+
     get eventType(): EventTypeValue {
         return "RequestInquiry";
     }
@@ -71,6 +73,41 @@ export default class RequestInquiry implements Event {
         return this._rawData;
     }
 
+    public toPlainObject(): IRequestInquiry {
+        return JSON.parse(JSON.stringify({
+            id: this._id,
+            created: this._created,
+            updated: this._updated,
+            time_responded: this._time_responded,
+            time_expiry: this._time_expiry,
+            monetary_account_id: this._monetary_account_id,
+            amount_inquired: this._amount_inquired,
+            amount_responded: this._amount_responded,
+            user_alias_created: this._user_alias_created,
+            user_alias_revoked: this._user_alias_revoked,
+            counterparty_alias: this._counterparty_alias,
+            description: this._description,
+            merchant_reference: this._merchant_reference,
+            attachment: this._attachment,
+            status: this._status,
+            batch_id: this._batch_id,
+            bunqme_share_url: this._bunqme_share_url,
+            scheduled_id: this._scheduled_id,
+            minimum_age: this._minimum_age,
+            require_address: this._require_address,
+            redirect_url: this._redirect_url,
+            address_shipping: this._address_shipping,
+            address_billing: this._address_billing,
+            geolocation: this._geolocation,
+            allow_chat: this._allow_chat,
+            request_reference_split_the_bill: this._request_reference_split_the_bill,
+        }));
+    }
+
+    get raw(): any {
+        return this._rawData;
+    }
+
     /**
      * @returns {number}
      */
@@ -102,75 +139,99 @@ export default class RequestInquiry implements Event {
     get id(): number {
         return this._id;
     }
+
     get created(): Date {
         return this._created;
     }
+
     get updated(): Date {
         return this._updated;
     }
+
     get time_responded(): Date {
         return this._time_responded;
     }
+
     get time_expiry(): Date {
         return this._time_expiry;
     }
+
     get monetary_account_id(): number {
         return this._monetary_account_id;
     }
+
     get amount_inquired(): Amount {
         return this._amount_inquired;
     }
+
     get amount_responded(): Amount | null {
         return this._amount_responded;
     }
+
     get user_alias_created(): ExtendedAlias {
         return this._user_alias_created;
     }
+
     get user_alias_revoked(): ExtendedAlias | null {
         return this._user_alias_revoked;
     }
+
     get counterparty_alias(): PaymentAlias {
         return this._counterparty_alias;
     }
+
     get description(): string {
         return this._description;
     }
+
     get merchant_reference(): string {
         return this._merchant_reference;
     }
+
     get attachment(): AttachmentList {
         return this._attachment;
     }
+
     get status(): RequestStatus {
         return this._status;
     }
+
     get batch_id(): number | null {
         return this._batch_id;
     }
+
     get bunqme_share_url(): string | null {
         return this._bunqme_share_url;
     }
+
     get scheduled_id(): number | null {
         return this._scheduled_id;
     }
+
     get minimum_age(): number | null {
         return this._minimum_age;
     }
+
     get require_address(): string {
         return this._require_address;
     }
+
     get address_shipping(): Address | null {
         return this._address_shipping;
     }
+
     get address_billing(): Address | null {
         return this._address_billing;
     }
+
     get geolocation(): Geolocation {
         return this._geolocation;
     }
+
     get allow_chat(): boolean {
         return this._allow_chat;
     }
+
     get request_reference_split_the_bill(): RequestSplitTheBill {
         return this._request_reference_split_the_bill;
     }
diff --git a/src/types/RequestInquiry.ts b/src/types/RequestInquiry.ts
new file mode 100644
index 00000000..eed7a284
--- /dev/null
+++ b/src/types/RequestInquiry.ts
@@ -0,0 +1,39 @@
+import {
+    Address,
+    Amount,
+    AttachmentList,
+    ExtendedAlias,
+    Geolocation,
+    PaymentAlias,
+    RequestSplitTheBill,
+    RequestStatus
+} from "~types/Types";
+
+export interface IRequestInquiry {
+    id: number;
+    created: Date;
+    updated: Date;
+    time_responded: Date;
+    time_expiry: Date;
+    monetary_account_id: number;
+    amount_inquired: Amount;
+    amount_responded: null | Amount;
+    user_alias_created: ExtendedAlias;
+    user_alias_revoked: null | ExtendedAlias;
+    counterparty_alias: PaymentAlias;
+    description: string;
+    merchant_reference: string;
+    attachment: AttachmentList;
+    status: RequestStatus;
+    batch_id: null | number;
+    bunqme_share_url: string;
+    scheduled_id: null | number;
+    minimum_age: null | number;
+    require_address: string;
+    redirect_url: null | string;
+    address_shipping: Address | null;
+    address_billing: Address | null;
+    geolocation: Geolocation;
+    allow_chat: boolean;
+    request_reference_split_the_bill: RequestSplitTheBill;
+}

From 4585d6daf0124db531cdfa28eaa16594a8635a1c Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 15:57:49 +0100
Subject: [PATCH 19/26] fix: webpack config source-map option name

---
 webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webpack.config.js b/webpack.config.js
index 004489d4..839c76ab 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -37,7 +37,7 @@ let config = {
         modules: ["node_modules", path.resolve(__dirname, "./src")]
     },
     mode: DEVELOPMENT ? "development" : "production",
-    devtool: DEVELOPMENT ? "cheap-module-eval-source-map" : "source-map",
+    devtool: DEVELOPMENT ? "eval-cheap-module-source-map" : "source-map",
     cache: DEVELOPMENT,
     performance: PRODUCTION
         ? {

From f514eb8f60e1f26cc997f4befaa9c51a4f65e422 Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 17:07:19 +0100
Subject: [PATCH 20/26] feat: (WIP) add more serializable objects

---
 src/Reducers/payments.js                 |  2 +-
 src/Reducers/request_inquiry_batches.js  |  2 +-
 src/components/RuleCollectionChecker.tsx |  5 +-
 src/functions/DataFilters.ts             |  1 +
 src/models/MonetaryAccount.ts            | 10 ++++
 src/models/Payment.ts                    | 43 ++++++++++++++++
 src/models/RequestInquiry.ts             | 64 ++++++++++++++----------
 src/models/RequestInquiryBatch.ts        | 24 +++++++++
 src/types/MonetaryAccount.ts             |  7 +--
 src/types/Payment.ts                     | 40 +++++++++++++++
 src/types/RequestInquiry.ts              | 54 ++++++++++----------
 src/types/RequestInquiryBatch.ts         | 12 +++++
 12 files changed, 203 insertions(+), 61 deletions(-)
 create mode 100644 src/types/Payment.ts
 create mode 100644 src/types/RequestInquiryBatch.ts

diff --git a/src/Reducers/payments.js b/src/Reducers/payments.js
index b53282c2..cdb3c42e 100644
--- a/src/Reducers/payments.js
+++ b/src/Reducers/payments.js
@@ -27,7 +27,7 @@ export default (state = defaultState, action) => {
             );
 
             // limit payments to 1000 in total
-            const mergedPayments = mergedInfo.items.slice(0, 1000);
+            const mergedPayments = mergedInfo.items.slice(0, 1000).map(item => item.toPlainObject());
 
             // store the data if we have access to the bunqjsclient
             window.BunqDesktopClient.storeEncrypt(
diff --git a/src/Reducers/request_inquiry_batches.js b/src/Reducers/request_inquiry_batches.js
index 1a907246..6cdee761 100644
--- a/src/Reducers/request_inquiry_batches.js
+++ b/src/Reducers/request_inquiry_batches.js
@@ -31,7 +31,7 @@ export default (state = defaultState, action) => {
             );
 
             // limit payments to 1000 in total
-            const mergedRequestBatches = mergedInfo.items.slice(0, 1000);
+            const mergedRequestBatches = mergedInfo.items.slice(0, 1000).map(item => item.toPlainObject());
 
             window.BunqDesktopClient.storeEncrypt(
                 {
diff --git a/src/components/RuleCollectionChecker.tsx b/src/components/RuleCollectionChecker.tsx
index 1e44ed1f..31ffaf32 100644
--- a/src/components/RuleCollectionChecker.tsx
+++ b/src/components/RuleCollectionChecker.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
+import Payment from "~models/Payment";
 import RequestInquiry from "~models/RequestInquiry";
 
 import { actions as categoriesActions } from "~store/categories";
@@ -70,8 +71,8 @@ class RuleCollectionChecker extends React.Component<ReturnType<typeof mapStateTo
 
     triggerWorkerEvent = () => {
         // use json format
-        const payments = this.props.payments.map(item => item.toJSON());
-        const requestInquiries = this.props.requestInquiries.map(item => new RequestInquiry(item).toJSON());
+        const payments = this.props.payments.map(item => Payment.fromPlainObject(item).toJSON());
+        const requestInquiries = this.props.requestInquiries.map(item => RequestInquiry.fromPlainObject(item).toJSON());
         const requestResponses = this.props.requestResponses.map(item => item.toJSON());
         const masterCardActions = this.props.masterCardActions.map(item => item.toJSON());
         const bunqMeTabs = this.props.bunqMeTabs.map(item => JSON.stringify(item));
diff --git a/src/functions/DataFilters.ts b/src/functions/DataFilters.ts
index 1aa29342..2b714b94 100644
--- a/src/functions/DataFilters.ts
+++ b/src/functions/DataFilters.ts
@@ -486,6 +486,7 @@ export const requestInquiryFilter = options => requestInquiry => {
         }
     }
 
+    console.log(requestInquiry.RequestInquiry);
     return checkDateRange(options.dateFromFilter, options.dateToFilter, requestInquiry.RequestInquiry.updated);
 };
 
diff --git a/src/models/MonetaryAccount.ts b/src/models/MonetaryAccount.ts
index 91b956c1..56a4a2d7 100644
--- a/src/models/MonetaryAccount.ts
+++ b/src/models/MonetaryAccount.ts
@@ -72,6 +72,16 @@ export default class MonetaryAccount {
         return this._rawData;
     }
 
+    /**
+     * Converts a plain object into a MonetaryAccount object
+     */
+    public static fromPlainObject(plainObject: IMonetaryAccount): MonetaryAccount {
+        return new MonetaryAccount({ [plainObject.accountType]: plainObject });
+    }
+
+    /**
+     * Converts this instantiated object into a serializable MonetaryAccount object
+     */
     public toPlainObject(): IMonetaryAccount {
         return JSON.parse(JSON.stringify({
             accountType: this._accountType,
diff --git a/src/models/Payment.ts b/src/models/Payment.ts
index 882413dc..b7b635c5 100644
--- a/src/models/Payment.ts
+++ b/src/models/Payment.ts
@@ -1,3 +1,4 @@
+import { IPayment } from "~types/Payment";
 import {
     Address,
     Amount,
@@ -76,6 +77,48 @@ export default class Payment implements Event {
         return this._rawData;
     }
 
+    /**
+     * Convert from a plain serializable object
+     */
+    public static fromPlainObject(plainObject: IPayment): Payment {
+        return new Payment({ Payment: plainObject });
+    }
+
+    /**
+     * Convert to a serializable plain object
+     */
+    public toPlainObject(): IPayment {
+        return JSON.parse(JSON.stringify({
+            Payment: {
+                id: this._id,
+                created: this._created,
+                updated: this._updated,
+                monetary_account_id: this._monetary_account_id,
+                amount: this._amount,
+                alias: this._alias,
+                counterparty_alias: this._counterparty_alias,
+                description: this._description,
+                type: this._type,
+                sub_type: this._sub_type,
+                bunqto_status: this._bunqto_status,
+                bunqto_sub_status: this._bunqto_sub_status,
+                bunqto_share_url: this._bunqto_share_url,
+                bunqto_expiry: this._bunqto_expiry,
+                bunqto_time_responded: this._bunqto_time_responded,
+                attachment: this._attachment,
+                balance_after_mutation: this._balance_after_mutation,
+                merchant_reference: this._merchant_reference,
+                batch_id: this._batch_id,
+                scheduled_id: this._scheduled_id,
+                address_shipping: this._address_shipping,
+                address_billing: this._address_billing,
+                geolocation: this._geolocation,
+                allow_chat: this._allow_chat,
+                request_reference_split_the_bill: this._request_reference_split_the_bill,
+            },
+        }));
+    }
+
     /**
      * @returns {number}
      */
diff --git a/src/models/RequestInquiry.ts b/src/models/RequestInquiry.ts
index 322d032d..f5efcf7b 100644
--- a/src/models/RequestInquiry.ts
+++ b/src/models/RequestInquiry.ts
@@ -73,34 +73,46 @@ export default class RequestInquiry implements Event {
         return this._rawData;
     }
 
+    /**
+     * Convert from a plain serializable object
+     */
+    public static fromPlainObject(plainObject: IRequestInquiry): RequestInquiry {
+        return new RequestInquiry(plainObject);
+    }
+
+    /**
+     * Convert to a plain serializable object
+     */
     public toPlainObject(): IRequestInquiry {
         return JSON.parse(JSON.stringify({
-            id: this._id,
-            created: this._created,
-            updated: this._updated,
-            time_responded: this._time_responded,
-            time_expiry: this._time_expiry,
-            monetary_account_id: this._monetary_account_id,
-            amount_inquired: this._amount_inquired,
-            amount_responded: this._amount_responded,
-            user_alias_created: this._user_alias_created,
-            user_alias_revoked: this._user_alias_revoked,
-            counterparty_alias: this._counterparty_alias,
-            description: this._description,
-            merchant_reference: this._merchant_reference,
-            attachment: this._attachment,
-            status: this._status,
-            batch_id: this._batch_id,
-            bunqme_share_url: this._bunqme_share_url,
-            scheduled_id: this._scheduled_id,
-            minimum_age: this._minimum_age,
-            require_address: this._require_address,
-            redirect_url: this._redirect_url,
-            address_shipping: this._address_shipping,
-            address_billing: this._address_billing,
-            geolocation: this._geolocation,
-            allow_chat: this._allow_chat,
-            request_reference_split_the_bill: this._request_reference_split_the_bill,
+            RequestInquiry: {
+                id: this._id,
+                created: this._created,
+                updated: this._updated,
+                time_responded: this._time_responded,
+                time_expiry: this._time_expiry,
+                monetary_account_id: this._monetary_account_id,
+                amount_inquired: this._amount_inquired,
+                amount_responded: this._amount_responded,
+                user_alias_created: this._user_alias_created,
+                user_alias_revoked: this._user_alias_revoked,
+                counterparty_alias: this._counterparty_alias,
+                description: this._description,
+                merchant_reference: this._merchant_reference,
+                attachment: this._attachment,
+                status: this._status,
+                batch_id: this._batch_id,
+                bunqme_share_url: this._bunqme_share_url,
+                scheduled_id: this._scheduled_id,
+                minimum_age: this._minimum_age,
+                require_address: this._require_address,
+                redirect_url: this._redirect_url,
+                address_shipping: this._address_shipping,
+                address_billing: this._address_billing,
+                geolocation: this._geolocation,
+                allow_chat: this._allow_chat,
+                request_reference_split_the_bill: this._request_reference_split_the_bill,
+            },
         }));
     }
 
diff --git a/src/models/RequestInquiryBatch.ts b/src/models/RequestInquiryBatch.ts
index f7b2476f..86555d66 100644
--- a/src/models/RequestInquiryBatch.ts
+++ b/src/models/RequestInquiryBatch.ts
@@ -1,3 +1,4 @@
+import { IRequestInquiryBatch } from "~types/RequestInquiryBatch";
 import { Amount, RequestSplitTheBill } from "~types/Types";
 import Event, { EventTypeValue } from "~types/Event";
 import RequestInquiry from "./RequestInquiry";
@@ -55,6 +56,29 @@ export default class RequestInquiryBatch implements Event {
         return this._rawData;
     }
 
+    /**
+     * Convert from a plain serializable object
+     */
+    public static fromPlainObject(plainObject: IRequestInquiryBatch): RequestInquiryBatch {
+        return new RequestInquiryBatch(plainObject);
+    }
+
+    /**
+     * Convert to a plain serializable object
+     */
+    public toPlainObject(): IRequestInquiryBatch {
+        return JSON.parse(JSON.stringify({
+            RequestInquiryBatch: {
+                id: this._id,
+                created: this._created,
+                updated: this._updated,
+                reference_split_the_bill: this._reference_split_the_bill,
+                request_inquiries: this.request_inquiries,
+                total_amount_inquired: this._total_amount_inquired,
+            },
+        }));
+    }
+
     /**
      * @returns {number}
      */
diff --git a/src/types/MonetaryAccount.ts b/src/types/MonetaryAccount.ts
index 5f81a7b3..071c73c4 100644
--- a/src/types/MonetaryAccount.ts
+++ b/src/types/MonetaryAccount.ts
@@ -1,10 +1,9 @@
 import NotificationFilter from "@bunq-community/bunq-js-client/dist/Types/NotificationFilter";
 import { AccountType, Alias, AllCoOwner, Amount, Avatar, Balance, MonetaryAccountSetting } from "~types/Types";
 
-export interface IMonetaryAccount {
+export type IMonetaryAccount = {
     // account type of this monetary account
     accountType: AccountType;
-
     // common fields
     id: number;
     created: Date;
@@ -24,10 +23,8 @@ export interface IMonetaryAccount {
     monetary_account_profile: any;
     notification_filters: NotificationFilter[];
     setting: MonetaryAccountSetting;
-
     savings_goal: Amount;
     savings_goal_progress: string;
-
     // only available on MonetaryAccountJoint objects
     all_co_owner: AllCoOwner | undefined;
-}
+};
diff --git a/src/types/Payment.ts b/src/types/Payment.ts
new file mode 100644
index 00000000..134ffc16
--- /dev/null
+++ b/src/types/Payment.ts
@@ -0,0 +1,40 @@
+import {
+    Address,
+    Amount,
+    AttachmentList,
+    Geolocation,
+    PaymentAlias,
+    PaymentSubType,
+    PaymentType,
+    RequestReferenceSplitTheBill
+} from "~types/Types";
+
+export interface IPayment {
+    Payment: {
+        id: number;
+        created: Date;
+        updated: Date;
+        monetary_account_id: number;
+        amount: Amount;
+        alias: PaymentAlias;
+        counterparty_alias: PaymentAlias;
+        description: string;
+        type: PaymentType;
+        sub_type: PaymentSubType;
+        bunqto_status: string | null;
+        bunqto_sub_status: string | null;
+        bunqto_share_url: string | null;
+        bunqto_expiry: string | null;
+        bunqto_time_responded: string | null;
+        attachment: AttachmentList;
+        balance_after_mutation: Amount | undefined;
+        merchant_reference: string;
+        batch_id: number | null;
+        scheduled_id: number | null;
+        address_shipping: Address | null;
+        address_billing: Address | null;
+        geolocation: Geolocation;
+        allow_chat: boolean;
+        request_reference_split_the_bill: RequestReferenceSplitTheBill;
+    };
+}
diff --git a/src/types/RequestInquiry.ts b/src/types/RequestInquiry.ts
index eed7a284..ce977379 100644
--- a/src/types/RequestInquiry.ts
+++ b/src/types/RequestInquiry.ts
@@ -10,30 +10,32 @@ import {
 } from "~types/Types";
 
 export interface IRequestInquiry {
-    id: number;
-    created: Date;
-    updated: Date;
-    time_responded: Date;
-    time_expiry: Date;
-    monetary_account_id: number;
-    amount_inquired: Amount;
-    amount_responded: null | Amount;
-    user_alias_created: ExtendedAlias;
-    user_alias_revoked: null | ExtendedAlias;
-    counterparty_alias: PaymentAlias;
-    description: string;
-    merchant_reference: string;
-    attachment: AttachmentList;
-    status: RequestStatus;
-    batch_id: null | number;
-    bunqme_share_url: string;
-    scheduled_id: null | number;
-    minimum_age: null | number;
-    require_address: string;
-    redirect_url: null | string;
-    address_shipping: Address | null;
-    address_billing: Address | null;
-    geolocation: Geolocation;
-    allow_chat: boolean;
-    request_reference_split_the_bill: RequestSplitTheBill;
+    RequestInquiry: {
+        id: number;
+        created: Date;
+        updated: Date;
+        time_responded: Date;
+        time_expiry: Date;
+        monetary_account_id: number;
+        amount_inquired: Amount;
+        amount_responded: null | Amount;
+        user_alias_created: ExtendedAlias;
+        user_alias_revoked: null | ExtendedAlias;
+        counterparty_alias: PaymentAlias;
+        description: string;
+        merchant_reference: string;
+        attachment: AttachmentList;
+        status: RequestStatus;
+        batch_id: null | number;
+        bunqme_share_url: string;
+        scheduled_id: null | number;
+        minimum_age: null | number;
+        require_address: string;
+        redirect_url: null | string;
+        address_shipping: Address | null;
+        address_billing: Address | null;
+        geolocation: Geolocation;
+        allow_chat: boolean;
+        request_reference_split_the_bill: RequestSplitTheBill;
+    };
 }
diff --git a/src/types/RequestInquiryBatch.ts b/src/types/RequestInquiryBatch.ts
new file mode 100644
index 00000000..6ba3cd09
--- /dev/null
+++ b/src/types/RequestInquiryBatch.ts
@@ -0,0 +1,12 @@
+import { Amount, RequestSplitTheBill } from "~types/Types";
+
+export interface IRequestInquiryBatch {
+    RequestInquiryBatch: {
+        id: number;
+        created: Date;
+        updated: Date;
+        reference_split_the_bill: RequestSplitTheBill;
+        request_inquiries: any[];
+        total_amount_inquired: Amount;
+    };
+}

From 26d65295fbf45db2092227669999561cde353202 Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 17:35:51 +0100
Subject: [PATCH 21/26] fix: running the test suite by updating
 jest/ts-jest/ts-loader

---
 package.json                 |  6 +++---
 tests/src/react/App.test.jsx |  2 +-
 yarn.lock                    | 39 ++++++++++++++++++++++--------------
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index c7c715ed..b0347d98 100644
--- a/package.json
+++ b/package.json
@@ -210,7 +210,7 @@
         "html-webpack-plugin": "^3.2.0",
         "iban": "^0.0.10",
         "increase-memory-limit": "^1.0.6",
-        "jest": "^24.1.0",
+        "jest": "^24.9.0",
         "libphonenumber-js": "^1.6.4",
         "localforage": "^1.7.2",
         "loglevel": "^1.6.1",
@@ -254,8 +254,8 @@
         "spectron": "^3.7.2",
         "store": "^2.0.4",
         "style-loader": "^0.22.1",
-        "ts-jest": "^23.1.4",
-        "ts-loader": "^4.5.0",
+        "ts-jest": "^24.3.0",
+        "ts-loader": "^6.2.1",
         "typeface-roboto": "^0.0.54",
         "typescript": "^3.0.1",
         "uglifyjs-webpack-plugin": "^1.3.0",
diff --git a/tests/src/react/App.test.jsx b/tests/src/react/App.test.jsx
index 85236f9e..e1f52a09 100644
--- a/tests/src/react/App.test.jsx
+++ b/tests/src/react/App.test.jsx
@@ -3,7 +3,7 @@ import React from "react";
 import enzyme from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
 
-import App from "../../../src/react/App";
+import App from "~components/App";
 
 describe("<App />", () => {
     let shallow;
diff --git a/yarn.lock b/yarn.lock
index 05d06c95..59c23df8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2542,7 +2542,7 @@ braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
-braces@~3.0.2:
+braces@^3.0.1, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -7039,7 +7039,7 @@ jest-worker@^24.6.0, jest-worker@^24.9.0:
     merge-stream "^2.0.0"
     supports-color "^6.1.0"
 
-jest@^24.1.0:
+jest@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest/-/jest-24.9.0.tgz#987d290c05a08b52c56188c1002e368edb007171"
   integrity sha512-YvkBL1Zm7d2B1+h5fHEOdyjCG+sGMz4f8D86/0HiqJ6MB4MnDc8FgP5vdWsGnemOQro7lnYo8UakZ3+5A0jxGw==
@@ -7578,7 +7578,7 @@ lodash.keys@^3.0.0:
     lodash.isarguments "^3.0.0"
     lodash.isarray "^3.0.0"
 
-lodash.memoize@^4.1.2:
+lodash.memoize@4.x, lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
@@ -7946,6 +7946,14 @@ micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
+micromatch@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
+  integrity sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.0.5"
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -9010,7 +9018,7 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
-picomatch@^2.0.4, picomatch@^2.0.7:
+picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.0.7:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
   integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==
@@ -10761,7 +10769,7 @@ semver-greatest-satisfied-range@^1.1.0:
   dependencies:
     sver-compat "^1.5.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.1, semver@^5.0.3, semver@^5.3.0, semver@^5.4.1, semver@^5.5, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
+"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.3.0, semver@^5.4.1, semver@^5.5, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -11788,31 +11796,32 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
-ts-jest@^23.1.4:
-  version "23.10.5"
-  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-23.10.5.tgz#cdb550df4466a30489bf70ba867615799f388dd5"
-  integrity sha512-MRCs9qnGoyKgFc8adDEntAOP64fWK1vZKnOYU1o2HxaqjdJvGqmkLCPCnVq1/If4zkUmEjKPnCiUisTrlX2p2A==
+ts-jest@^24.3.0:
+  version "24.3.0"
+  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-24.3.0.tgz#b97814e3eab359ea840a1ac112deae68aa440869"
+  integrity sha512-Hb94C/+QRIgjVZlJyiWwouYUF+siNJHJHknyspaOcZ+OQAIdFG/UrdQVXw/0B8Z3No34xkUXZJpOTy9alOWdVQ==
   dependencies:
     bs-logger "0.x"
     buffer-from "1.x"
     fast-json-stable-stringify "2.x"
     json5 "2.x"
+    lodash.memoize "4.x"
     make-error "1.x"
     mkdirp "0.x"
     resolve "1.x"
     semver "^5.5"
     yargs-parser "10.x"
 
-ts-loader@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-4.5.0.tgz#a1ce70b2dc799941fb2197605f0d67874097859b"
-  integrity sha512-ihgVaSmgrX4crGV4n7yuoHPoCHbDzj9aepCZR9TgIx4SgJ9gdnB6xLHgUBb7bsFM/f0K6x9iXa65KY/Fu1Klkw==
+ts-loader@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-6.2.1.tgz#67939d5772e8a8c6bdaf6277ca023a4812da02ef"
+  integrity sha512-Dd9FekWuABGgjE1g0TlQJ+4dFUfYGbYcs52/HQObE0ZmUNjQlmLAS7xXsSzy23AMaMwipsx5sNHvoEpT2CZq1g==
   dependencies:
     chalk "^2.3.0"
     enhanced-resolve "^4.0.0"
     loader-utils "^1.0.2"
-    micromatch "^3.1.4"
-    semver "^5.0.1"
+    micromatch "^4.0.0"
+    semver "^6.0.0"
 
 tslib@^1.9.0, tslib@^1.9.3:
   version "1.10.0"

From 5de81b09c3aeccc9911bca79a03516fff905d89e Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 22:49:42 +0100
Subject: [PATCH 22/26] fix: tests + TypeScript types

---
 dist/.gitkeep                                 |  0
 package.json                                  | 24 ++---
 src/app.ts                                    |  8 +-
 src/components/AccountCard.tsx                |  2 +
 .../AccountAvatarCircularProgress.tsx         |  2 +
 src/components/AccountList/AccountList.tsx    |  5 ++
 .../AccountList/AccountListItem.tsx           | 12 ++-
 .../AccountList/AccountListItemChip.tsx       |  2 +-
 src/components/AccountList/AddAccount.tsx     | 16 +++-
 src/components/App.tsx                        |  9 +-
 src/components/BunqDesktopClient.ts           | 12 ++-
 src/components/BunqMeTabList.tsx              |  9 +-
 src/components/Categories/CategoryChips.tsx   |  2 +
 src/components/Categories/CategoryIcons.tsx   |  4 +-
 .../Categories/CategorySelector.tsx           |  2 +
 .../Categories/CategorySelectorDialog.tsx     |  2 +
 src/components/CombinedList/CombinedList.tsx  | 11 ++-
 src/components/CombinedList/EventData.tsx     |  6 ++
 src/components/CombinedList/ListControls.tsx  |  6 +-
 src/components/FileUpload/FilePicker.tsx      | 11 ++-
 .../FileUpload/UploadFullscreen.tsx           | 10 ++-
 .../FilterComponents/AccountSelection.tsx     |  6 +-
 .../FilterComponents/AmountFilter.tsx         |  2 +-
 .../FilterComponents/CardSelection.tsx        |  6 +-
 .../FilterComponents/CategorySelection.tsx    |  4 +-
 .../FilterComponents/ClearFilter.tsx          |  2 +
 .../FilterComponents/FilterDrawer.tsx         | 14 +--
 .../FilterComponents/SearchFilter.tsx         |  1 +
 .../FormFields/AccountSelectorDialog.tsx      |  1 +
 src/components/FormFields/ColorPicker.tsx     |  2 +
 .../FormFields/EmailSuggestions.tsx           |  3 +-
 .../FormFields/InputSuggestions.tsx           | 25 +++---
 .../FormFields/MoneyFormatInputDefault.tsx    | 20 +++--
 src/components/FormFields/TargetSelection.tsx |  2 +
 .../GeoLocation/GeoLocationListItem.tsx       | 12 ++-
 src/components/GeoLocation/GeoLocationMap.tsx |  1 +
 .../GeoLocation/GeoLocationView.tsx           |  2 +
 src/components/Header.tsx                     |  5 ++
 src/components/Layout.tsx                     | 33 +++++--
 .../ListItems/BunqMeTabListItem.tsx           | 22 +++--
 .../ListItems/MasterCardActionListItem.tsx    | 22 +++--
 src/components/ListItems/PaymentListItem.tsx  | 36 +++++---
 .../ListItems/RequestInquiryBatchListItem.tsx | 26 ++++--
 .../ListItems/RequestInquiryListItem.tsx      | 26 ++++--
 .../ListItems/RequestResponseListItem.tsx     | 26 ++++--
 .../ShareInviteBankTypes/DraftAccess.tsx      | 11 +--
 .../ShareInviteBankTypes/FullAccess.tsx       | 11 +--
 .../ShareInviteBankTypes/ShowOnly.tsx         | 11 +--
 ...reInviteMonetaryAccountInquiryListItem.tsx | 19 ++--
 ...eInviteMonetaryAccountResponseListItem.tsx | 15 ++--
 src/components/MainDialog.tsx                 |  2 +
 src/components/MainSnackbar.tsx               |  3 +
 src/components/MoneyAmountLabel.tsx           | 36 ++++----
 src/components/NoteTexts/NoteTextForm.tsx     |  2 +
 .../PDFExportHelper/PDFExportHelper.tsx       |  3 +
 src/components/QR/AccountQRCode.tsx           | 13 +--
 src/components/QR/AccountQRFullscreen.tsx     | 23 +++--
 src/components/QR/QRCode.tsx                  | 28 +++---
 src/components/Queue/QueueHeaderIcon.tsx      |  4 +-
 src/components/Queue/QueueManager.tsx         | 27 ++++--
 src/components/Queue/QueueSidebarListItem.tsx |  2 +
 src/components/ReactJsonWrapper.tsx           |  1 +
 .../ReduxForm/Fields/renderAccountsPicker.tsx |  1 +
 .../ReduxForm/Fields/renderAmountField.tsx    |  1 -
 src/components/Routes.tsx                     | 26 +++++-
 src/components/Routing/NavLink.tsx            |  4 +-
 src/components/Routing/PrivateRoute.tsx       |  6 +-
 src/components/Routing/PublicRoute.tsx        |  6 +-
 src/components/RuleCollectionChecker.tsx      | 16 +++-
 src/components/SavingsGoals/Helpers.ts        |  2 +-
 .../SavingsGoals/SavingsGoalListItem.tsx      | 20 +++--
 .../SavingsGoalListItemWrapper.tsx            | 14 +--
 .../SavingsGoals/SavingsGoalSmallListItem.tsx |  2 +-
 .../SavingsGoals/SavingsGoalsList.tsx         |  9 +-
 src/components/Sidebar.tsx                    | 14 +--
 src/components/SpeedDial.tsx                  | 34 ++++---
 src/components/SwitchKeysMenu.tsx             | 11 ++-
 src/components/TransactionHeader.tsx          | 15 ++--
 src/components/TranslationHelpers/Button.tsx  |  4 +-
 src/components/react-app.tsx                  |  4 +
 src/functions/Analytics.ts                    |  7 +-
 src/functions/BunqErrorHandler.ts             |  1 -
 src/functions/Crypto/CryptoWorkerWrapper.ts   | 22 +++--
 src/functions/Logger.ts                       | 18 ++--
 src/functions/PhoneLib.ts                     |  6 +-
 src/functions/Utils.ts                        |  6 +-
 src/functions/VersionChecker.ts               |  3 +
 src/helpers/context_menu.ts                   |  5 +-
 src/helpers/oauth.ts                          | 11 +++
 src/helpers/touchbar.ts                       |  1 +
 src/helpers/tray.ts                           |  1 +
 src/menu/dev_menu_template.ts                 |  1 +
 src/models/SavingsGoal.ts                     |  2 +-
 src/pages/AccountInfo.tsx                     |  2 +
 src/pages/AddAccount.tsx                      |  2 +
 src/pages/ApplicationInfo.tsx                 |  2 +
 src/pages/BunqMePersonal/BunqMePersonal.tsx   |  2 +
 src/pages/BunqMePersonal/LinkPreviewField.tsx |  8 --
 src/pages/BunqMeTab/BunqMeTab.tsx             |  2 +
 src/pages/BunqMeTab/ConfirmationDialog.tsx    | 10 ++-
 src/pages/Cards/Cards.tsx                     |  2 +
 src/pages/Cards/CvcCodeListItem.tsx           |  2 +
 .../Cards/VirtualAccountNumbersDialog.tsx     |  2 +
 .../CategoryDashboard/CategoryDashboard.tsx   |  2 +
 src/pages/Connect/Connect.tsx                 |  4 +-
 src/pages/Connect/ConnectListItem.tsx         |  2 +
 src/pages/Contacts/ContactHeader.tsx          | 52 +++++------
 src/pages/Contacts/Contacts.tsx               |  2 +
 src/pages/Dashboard/AddMoneyButton.tsx        |  4 +
 src/pages/Dashboard/Dashboard.tsx             |  9 +-
 src/pages/DebugPage.tsx                       |  2 +
 src/pages/Disclaimer.tsx                      |  4 +-
 src/pages/Exports.tsx                         |  1 +
 src/pages/Login/Login.tsx                     | 25 +++---
 src/pages/Login/OAuthManagement.tsx           | 14 ++-
 src/pages/Login/SideOptions.tsx               |  6 +-
 src/pages/LoginPassword.tsx                   | 34 ++++---
 src/pages/MasterCardActionInfo.tsx            |  2 +
 src/pages/NotFound.tsx                        | 10 ++-
 src/pages/Pay/ConfirmationDialog.tsx          |  2 +
 src/pages/Pay/Pay.tsx                         | 23 ++++-
 src/pages/PaymentInfo.tsx                     | 11 ++-
 .../PendingPayments/PendingPaymentRow.tsx     |  1 +
 src/pages/PendingPayments/PendingPayments.tsx |  2 +
 src/pages/Profile/BillingInfo.tsx             | 12 ++-
 src/pages/Profile/BusinessInfo.tsx            |  1 +
 src/pages/Profile/NotificationFilters.tsx     | 12 ++-
 src/pages/Profile/Profile.tsx                 |  1 +
 .../RequestInquiry/ConfirmationDialog.tsx     | 13 ++-
 .../RequestInquiry/Options/AllowBunqMe.tsx    | 12 ++-
 .../RequestInquiry/Options/MinimumAge.tsx     | 10 ++-
 src/pages/RequestInquiry/RequestInquiry.tsx   |  2 +
 src/pages/RequestInquiry/SplitAmountForm.tsx  | 15 +++-
 src/pages/RequestInquiry/SplitAmountItem.tsx  | 12 ++-
 src/pages/RequestInquiryInfo.tsx              |  2 +
 .../RequestResponseInfo.tsx                   |  8 +-
 .../RuleDashboard/RuleCollectionItem.tsx      |  3 +
 src/pages/RuleDashboard/RuleDashboard.tsx     |  3 +
 src/pages/RulePage/RuleCollectionPreview.tsx  |  3 +-
 src/pages/RulePage/RuleCreator.tsx            |  5 +-
 src/pages/RulePage/RulePage.tsx               |  2 +
 .../RuleTypeItems/AccountRuleItem.tsx         |  7 +-
 .../RuleTypeItems/ItemTypeRuleItem.tsx        |  6 +-
 .../TransactionAmountRuleItem.tsx             |  6 +-
 .../RulePage/RuleTypeItems/ValueRuleItem.tsx  |  6 +-
 src/pages/SavingsGoalPage/SavingsGoalPage.tsx | 19 ++--
 .../renderAmountFieldCustom.tsx               |  1 +
 src/pages/SavingsGoals/SavingsGoals.tsx       |  2 +
 .../ScheduledPaymentItem.tsx                  | 10 ++-
 .../ScheduledPayments/ScheduledPayments.tsx   |  2 +
 .../ScheduledPaymentsEditDialog.tsx           |  8 ++
 src/pages/Settings/EditPasswordForm.tsx       |  2 +
 src/pages/Settings/Settings.tsx               |  3 +-
 src/pages/Stats/Stats.tsx                     |  2 +
 src/pages/SwitchApiKeys.tsx                   |  2 +
 src/store/accountIdFilter/index.ts            |  2 +-
 src/store/accounts/thunks.ts                  | 19 ++--
 src/store/bunqMeTabs/thunks.ts                |  3 +-
 .../src/react/{App.test.jsx => App.test.tsx}  |  2 +-
 tsconfig.json                                 |  1 +
 yarn.lock                                     | 88 ++++++++++++++-----
 161 files changed, 1027 insertions(+), 464 deletions(-)
 delete mode 100644 dist/.gitkeep
 rename tests/src/react/{App.test.jsx => App.test.tsx} (93%)

diff --git a/dist/.gitkeep b/dist/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/package.json b/package.json
index b0347d98..e031343a 100644
--- a/package.json
+++ b/package.json
@@ -101,7 +101,7 @@
     "jest": {
         "globals": {
             "ts-jest": {
-                "useBabelrc": true
+                "babelConfig": true
             }
         },
         "modulePathIgnorePatterns": [
@@ -120,18 +120,19 @@
             "^.+\\.tsx?$": "ts-jest"
         },
         "moduleFileExtensions": [
-            "ts",
-            "tsx",
             "js",
-            "jsx",
             "json",
-            "node"
-        ]
+            "jsx",
+            "node",
+            "ts",
+            "tsx"
+        ],
+        "preset": "ts-jest/presets/js-with-babel",
+        "testMatch": null
     },
     "dependencies": {
         "@manaflair/redux-batch": "^1.0.0",
         "@reduxjs/toolkit": "^1.2.3",
-        "@types/lodash": "^4.14.149",
         "electron-localshortcut": "^3.2.1",
         "electron-log": "^2.2.9",
         "electron-settings": "^3.1.3",
@@ -176,9 +177,12 @@
         "@material-ui/lab": "^3.0.0-alpha.30",
         "@rollup/plugin-typescript": "^2.1.0",
         "@types/jest": "^24.0.25",
+        "@types/lodash": "^4.14.149",
         "@types/moxios": "^0.4.9",
         "@types/node": "^13.1.4",
         "@types/react-i18next": "^8.1.0",
+        "@types/react-router": "^5.1.4",
+        "@types/react-router-dom": "^5.1.3",
         "animate.css": "^3.7.2",
         "awaiting": "^3.0.0",
         "axios": "0.18.1",
@@ -236,8 +240,8 @@
         "react-map-gl": "^3.3.5",
         "react-number-format": "^4.0.7",
         "react-redux": "^5.0.7",
-        "react-router": "^4.3.1",
-        "react-router-dom": "^4.3.1",
+        "react-router": "^5.1.2",
+        "react-router-dom": "^5.1.2",
         "react-spring": "^3.1.0",
         "react-sticky-box": "^0.6.1",
         "react-test-renderer": "^16.3.1",
@@ -257,7 +261,7 @@
         "ts-jest": "^24.3.0",
         "ts-loader": "^6.2.1",
         "typeface-roboto": "^0.0.54",
-        "typescript": "^3.0.1",
+        "typescript": "^3.7.5",
         "uglifyjs-webpack-plugin": "^1.3.0",
         "universal-analytics": "^0.4.15",
         "vcf": "^2.0.1",
diff --git a/src/app.ts b/src/app.ts
index 8419b06d..07b00456 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,5 +1,11 @@
 import "~helpers/context_menu";
 import "~helpers/external_links";
 import BunqDesktopClient from "~components/BunqDesktopClient";
+import { CryptoWorkerQueue } from "~functions/Crypto/CryptoWorkerWrapper";
 
-export type AppWindow = Window & { BunqDesktopClient?: BunqDesktopClient; t: Function; BUNQDESKTOP_LANGUAGE_SETTING: string };
+export type AppWindow = Window & {
+    BunqDesktopClient?: BunqDesktopClient;
+    t: Function;
+    BUNQDESKTOP_LANGUAGE_SETTING: string;
+    cryptoWorkerQueue: CryptoWorkerQueue;
+};
diff --git a/src/components/AccountCard.tsx b/src/components/AccountCard.tsx
index 72a6ca55..3036c174 100644
--- a/src/components/AccountCard.tsx
+++ b/src/components/AccountCard.tsx
@@ -44,9 +44,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class AccountCard extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/components/AccountList/AccountAvatarCircularProgress.tsx b/src/components/AccountList/AccountAvatarCircularProgress.tsx
index 0d1b2978..733a6eae 100644
--- a/src/components/AccountList/AccountAvatarCircularProgress.tsx
+++ b/src/components/AccountList/AccountAvatarCircularProgress.tsx
@@ -14,6 +14,7 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
@@ -77,6 +78,7 @@ const AccountAvatarCircularProgress = ({ account, theme, selected = false, style
 
 const mapStateToProps = (state: ReduxState) => {
     return {
+        // @ts-ignore
         theme: state.options.theme,
     };
 };
diff --git a/src/components/AccountList/AccountList.tsx b/src/components/AccountList/AccountList.tsx
index 20e51025..0dd1d944 100644
--- a/src/components/AccountList/AccountList.tsx
+++ b/src/components/AccountList/AccountList.tsx
@@ -49,11 +49,13 @@ interface IState {
     totalBalance: number;
     fetchedAccounts: any;
     accountTotalSelectionMode: any;
+    [key: string]: any;
 }
 
 interface IProps {
     t: AppWindow["t"];
     BunqJSClient: BunqJSClient;
+    [key: string]: any;
 }
 
 class AccountList extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -313,10 +315,13 @@ const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         userType: state.user.user_type,
+
+        // @ts-ignore
         limitedPermissions: state.user.limited_permissions,
 
         applicationLastAutoUpdate: state.application.last_auto_update,
 
+        // @ts-ignore
         hideBalance: state.options.hide_balance,
 
         registrationIsLoading: state.registration.loading,
diff --git a/src/components/AccountList/AccountListItem.tsx b/src/components/AccountList/AccountListItem.tsx
index 0b26ad9c..0dbd4ad3 100644
--- a/src/components/AccountList/AccountListItem.tsx
+++ b/src/components/AccountList/AccountListItem.tsx
@@ -1,9 +1,8 @@
-import BunqJSClient from "@bunq-community/bunq-js-client";
 import React, { CSSProperties } from "react";
 import { translate } from "react-i18next";
 import { connect } from "react-redux";
 import Avatar from "@material-ui/core/Avatar";
-import IconButton from "@material-ui/core/IconButton";
+import OriginalIconButton from "@material-ui/core/IconButton";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import ListItemText from "@material-ui/core/ListItemText";
@@ -24,6 +23,8 @@ import AccountAvatarCircularProgress from "./AccountAvatarCircularProgress";
 
 import { actions as accountsActions } from "~store/accounts";
 
+const IconButton: any = OriginalIconButton;
+
 const styles = {
     bigAvatar: {
         width: 60,
@@ -44,10 +45,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
-    BunqJSClient: BunqJSClient;
+    [key: string]: any;
 }
 
 class AccountListItem extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -181,8 +183,10 @@ class AccountListItem extends React.Component<ReturnType<typeof mapStateToProps>
 const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
+        // @ts-ignore
         theme: state.options.theme,
         paymentsLoading: state.payments.loading,
+        // @ts-ignore
         hideBalance: state.options.hide_balance,
 
         selectedAccountIds: state.accountIdFilter.selectedAccountIds,
@@ -190,7 +194,7 @@ const mapStateToProps = (state: ReduxState) => {
     };
 };
 
-const mapDispatchToProps = (dispatch: AppDispatch, ownProps: IProps) => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         selectAccount: accountId => dispatch(accountsActions.selectAccount(accountId)),
 
diff --git a/src/components/AccountList/AccountListItemChip.tsx b/src/components/AccountList/AccountListItemChip.tsx
index 6ba8238c..05f71d82 100644
--- a/src/components/AccountList/AccountListItemChip.tsx
+++ b/src/components/AccountList/AccountListItemChip.tsx
@@ -14,7 +14,7 @@ export default props => {
         onDelete
     } = props;
 
-    const chipProps = {
+    const chipProps: any = {
         style: style,
         label: account.description
     };
diff --git a/src/components/AccountList/AddAccount.tsx b/src/components/AccountList/AddAccount.tsx
index fb613c56..fabef2cb 100644
--- a/src/components/AccountList/AddAccount.tsx
+++ b/src/components/AccountList/AddAccount.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
-import ListItem from "@material-ui/core/ListItem";
+import OriginalListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import Avatar from "@material-ui/core/Avatar";
 import AddBoxIcon from "@material-ui/icons/AddBox";
@@ -8,6 +8,8 @@ import AddBoxIcon from "@material-ui/icons/AddBox";
 import NavLink from "~components/Routing/NavLink";
 import { translate } from "react-i18next";
 
+const ListItem: any = OriginalListItem;
+
 const styles = {
     bigAvatar: {
         width: 60,
@@ -15,7 +17,17 @@ const styles = {
     }
 };
 
-class AddAccount extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class AddAccount extends React.Component<IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {};
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 7df189eb..301fe667 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,4 +1,3 @@
-import BunqJSClient from "@bunq-community/bunq-js-client";
 import React from "react";
 import { Provider } from "react-redux";
 import { HashRouter } from "react-router-dom";
@@ -14,8 +13,7 @@ import store from "~store/index";
 import "./i18n";
 
 export interface IProps {
-    analytics: boolean;
-    BunqJSClient: BunqJSClient;
+    [key: string]: any;
 }
 
 export default class App extends React.Component<IProps> {
@@ -30,10 +28,7 @@ export default class App extends React.Component<IProps> {
                 <MuiPickersUtilsProvider utils={DateFnsUtils}>
                     <Provider store={store}>
                         <HashRouter>
-                            <Layout
-                                routesComponent={Routes}
-                                analytics={this.props.analytics}
-                            />
+                            <Layout routesComponent={Routes} />
                         </HashRouter>
                     </Provider>
                 </MuiPickersUtilsProvider>
diff --git a/src/components/BunqDesktopClient.ts b/src/components/BunqDesktopClient.ts
index a20dcc73..acd7cc46 100644
--- a/src/components/BunqDesktopClient.ts
+++ b/src/components/BunqDesktopClient.ts
@@ -34,9 +34,12 @@ const sortApiKeyList = (a, b) => {
 };
 
 export class IndexedDbWrapper implements StorageInterface {
+    // @ts-ignore
     private _indexedDb: LocalForageDriver;
 
+    // @ts-ignore
     constructor(config: LocalForageOptions) {
+        // @ts-ignore
         this._indexedDb = localforage.createInstance(config);
     }
 
@@ -89,7 +92,9 @@ export class BunqDesktopClient {
         this.Logger = Logger;
         this.Store = Store;
 
+        // @ts-ignore
         const basicConfig: LocalForageOptions = {
+            // @ts-ignore
             driver: localforage.INDEXEDDB,
             name: "bunqDesktop",
             version: 1.0
@@ -186,7 +191,9 @@ export class BunqDesktopClient {
         // store the new api key in the stored api key list
         const storedApiKeyInfo: StoredApiKey = {
             identifier: this.password_identifier,
+            // @ts-ignore
             api_key: this.encrypted_api_key,
+            // @ts-ignore
             api_key_iv: this.encrypted_api_key_iv,
             permitted_ips: this.permitted_ips,
             device_name: this.device_name,
@@ -263,9 +270,11 @@ export class BunqDesktopClient {
         this.derived_password_salt = this.getStoredValue(SALT_LOCATION, false);
 
         // derive a key from the new password
+        // @ts-ignore
         const derivedPassword = await derivePasswordKey(newPassword, this.derived_password_salt, 250000);
         const derivedIdentifier = await derivePasswordKey(
             derivedPassword.key + "identifier",
+            // @ts-ignore
             this.derived_password_salt,
             100000
         );
@@ -328,7 +337,8 @@ export class BunqDesktopClient {
     /**
      * Decrypts with the current password, and returns the encrypted version with a new password
      * @param {string} newEncryptionKey
-     * @param {StoredApiKey} storedApiKey
+     * @param {string} apiKey
+     * @param {string} apiKeyIv
      * @returns {Promise}
      */
     private async updateApiKeyEncryption(newEncryptionKey: string, apiKey: string, apiKeyIv: string) {
diff --git a/src/components/BunqMeTabList.tsx b/src/components/BunqMeTabList.tsx
index 91fadb15..8b4fc917 100644
--- a/src/components/BunqMeTabList.tsx
+++ b/src/components/BunqMeTabList.tsx
@@ -6,7 +6,7 @@ import ListSubheader from "@material-ui/core/ListSubheader";
 import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import LinearProgress from "@material-ui/core/LinearProgress";
 import Divider from "@material-ui/core/Divider";
-import Chip from "@material-ui/core/Chip";
+import OriginalChip from "@material-ui/core/Chip";
 import Avatar from "@material-ui/core/Avatar";
 import IconButton from "@material-ui/core/IconButton";
 
@@ -20,6 +20,8 @@ import BunqMeTabListItem from "./ListItems/BunqMeTabListItem";
 import { actions as snackbarActions } from "~store/snackbar";
 import { bunqMeTabPut } from "~store/bunqMeTab/thunks";
 
+const Chip: any = OriginalChip;
+
 const styles: any = {
     list: {
         textAlign: "left"
@@ -31,9 +33,11 @@ const styles: any = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class BunqMeTabList extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -62,7 +66,7 @@ class BunqMeTabList extends React.Component<ReturnType<typeof mapStateToProps> &
         const { t } = this.props;
         const loadingContent = this.props.bunqMeTabsLoading ? <LinearProgress /> : <Divider />;
 
-        const bunqMeTabs = this.props.bunqMeTabs.map(bunqMeTab => {
+        const bunqMeTabs = this.props.bunqMeTabs.map((bunqMeTab: any) => {
             if (this.state.showInactiveTabs === false && bunqMeTab.BunqMeTab.status !== "WAITING_FOR_PAYMENT") {
                 return null;
             }
@@ -115,6 +119,7 @@ class BunqMeTabList extends React.Component<ReturnType<typeof mapStateToProps> &
 const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
+        // @ts-ignore
         limitedPermissions: state.user.limited_permissions,
 
         bunqMeTabs: state.bunqMeTabs.bunq_me_tabs,
diff --git a/src/components/Categories/CategoryChips.tsx b/src/components/Categories/CategoryChips.tsx
index 03c0e146..2e835974 100644
--- a/src/components/Categories/CategoryChips.tsx
+++ b/src/components/Categories/CategoryChips.tsx
@@ -13,9 +13,11 @@ const style = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class CategoryChips extends React.PureComponent<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/components/Categories/CategoryIcons.tsx b/src/components/Categories/CategoryIcons.tsx
index cda2d472..8ec8d6bb 100644
--- a/src/components/Categories/CategoryIcons.tsx
+++ b/src/components/Categories/CategoryIcons.tsx
@@ -14,10 +14,12 @@ const style = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
     style: CSSProperties;
+    [key: string]: any;
 }
 
 class CategoryIcons extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -69,7 +71,7 @@ class CategoryIcons extends React.Component<ReturnType<typeof mapStateToProps> &
             return <CategoryIcon category={category} />;
         });
 
-        return <div style={{ ...style, ...this.props.style }}>{chips}</div>;
+        return <div style={({ ...style, ...this.props.style } as any)}>{chips}</div>;
     }
 }
 
diff --git a/src/components/Categories/CategorySelector.tsx b/src/components/Categories/CategorySelector.tsx
index a3ceeb30..a055ea05 100644
--- a/src/components/Categories/CategorySelector.tsx
+++ b/src/components/Categories/CategorySelector.tsx
@@ -19,9 +19,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class CategorySelector extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/components/Categories/CategorySelectorDialog.tsx b/src/components/Categories/CategorySelectorDialog.tsx
index c772c24c..19321796 100644
--- a/src/components/Categories/CategorySelectorDialog.tsx
+++ b/src/components/Categories/CategorySelectorDialog.tsx
@@ -9,9 +9,11 @@ import TranslateButton from "~components/TranslationHelpers/Button";
 import CategorySelector from "./CategorySelector";
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class CategorySelectorDialog extends React.Component<IProps> {
diff --git a/src/components/CombinedList/CombinedList.tsx b/src/components/CombinedList/CombinedList.tsx
index d3b2ed89..266ab1ed 100644
--- a/src/components/CombinedList/CombinedList.tsx
+++ b/src/components/CombinedList/CombinedList.tsx
@@ -1,5 +1,5 @@
-import BunqJSClient from "@bunq-community/bunq-js-client";
 import React from "react";
+
 const sessionStore = require("store/storages/sessionStorage");
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
@@ -11,6 +11,7 @@ import ListSubheader from "@material-ui/core/ListSubheader";
 import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 
 import InfoIcon from "@material-ui/icons/Info";
+import { AppWindow } from "~app";
 import { bunqMeTabPut } from "~store/bunqMeTab/thunks";
 import { AppDispatch, ReduxState } from "~store/index";
 
@@ -63,7 +64,9 @@ const styles: any = {
 const STORED_SCROLL_POSITION = "STORED_SCROLL_POSITION";
 
 interface IProps {
-  BunqJSClient: BunqJSClient;
+    displayAcceptedRequests: any;
+    displayRequestPayments: any;
+    t: AppWindow["t"];
 }
 
 interface IState {
@@ -160,7 +163,7 @@ class CombinedList extends React.Component<ReturnType<typeof mapStateToProps> &
             ...requestInquiryBatches,
             ...shareInviteBankInquiries,
             ...payments
-        ].sort(function(a, b) {
+        ].sort(function (a, b) {
             return +new Date(b.filterDate) - +new Date(a.filterDate);
         });
 
@@ -421,7 +424,7 @@ const mapStateToProps = (state: ReduxState) => {
         shareInviteBankInquiriesLoading: state.share_invite_monetary_account_inquiries.loading,
 
         shareInviteMonetaryAccountResponses:
-            state.share_invite_monetary_account_responses.share_invite_monetary_account_responses,
+        state.share_invite_monetary_account_responses.share_invite_monetary_account_responses,
         shareInviteMonetaryAccountResponsesLoading: state.share_invite_monetary_account_responses.loading
     };
 };
diff --git a/src/components/CombinedList/EventData.tsx b/src/components/CombinedList/EventData.tsx
index 64813b84..dbf7a976 100644
--- a/src/components/CombinedList/EventData.tsx
+++ b/src/components/CombinedList/EventData.tsx
@@ -8,6 +8,7 @@ import Collapse from "@material-ui/core/Collapse";
 import IncomingIcon from "@material-ui/icons/KeyboardArrowDown";
 import OutgoingIcon from "@material-ui/icons/KeyboardArrowUp";
 import ChangeIcon from "@material-ui/icons/CompareArrows";
+import { AppWindow } from "~app";
 
 import { formatMoney } from "~functions/Utils";
 
@@ -27,9 +28,14 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    t: AppWindow["t"];
+    theme: any;
+    events: any;
+    open: any;
 }
 
 class EventData extends React.Component<IProps> {
diff --git a/src/components/CombinedList/ListControls.tsx b/src/components/CombinedList/ListControls.tsx
index 90b1edb7..bf8639e3 100644
--- a/src/components/CombinedList/ListControls.tsx
+++ b/src/components/CombinedList/ListControls.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import Grid from "@material-ui/core/Grid";
 import IconButton from "@material-ui/core/IconButton";
 import TextField from "@material-ui/core/TextField";
@@ -44,7 +44,7 @@ export default props => {
                     </IconButton>
                 </Grid>
 
-                <Grid item xs={4} style={styles.centerPaginationDiv}>
+                <Grid item xs={4} style={styles.centerPaginationDiv as CSSProperties}>
                     <TextField
                         style={styles.pageField}
                         value={page + 1}
@@ -58,7 +58,7 @@ export default props => {
                     />
                 </Grid>
 
-                <Grid item xs={4} style={styles.centerPaginationDiv}>
+                <Grid item xs={4} style={styles.centerPaginationDiv as CSSProperties}>
                     <TextField select style={styles.pageField} value={pageSize} onChange={setPageSize}>
                         <MenuItem value={5}>5</MenuItem>
                         <MenuItem value={10}>10</MenuItem>
diff --git a/src/components/FileUpload/FilePicker.tsx b/src/components/FileUpload/FilePicker.tsx
index ad98d1cd..c2e6937e 100644
--- a/src/components/FileUpload/FilePicker.tsx
+++ b/src/components/FileUpload/FilePicker.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React, { RefObject } from "react";
 
 import FileUpload from "../CustomSVG/FileUpload";
 
@@ -37,13 +36,17 @@ const styles = {
 const allowedFileTypes = ["image/jpeg", "image/png", "image/gif"];
 
 interface IState {
+    imagePreviewUrl: false | string;
 }
 
 interface IProps {
+    handleFileDrop: Function;
+    onChange?: Function;
 }
 
 class FilePicker extends React.Component<IProps> {
     state: IState;
+    fileInput: RefObject<any>;
 
     constructor(props, context) {
         super(props, context);
@@ -97,8 +100,4 @@ class FilePicker extends React.Component<IProps> {
     }
 }
 
-FilePicker.propTypes = {
-    onChange: PropTypes.func.isRequired
-};
-
 export default FilePicker;
diff --git a/src/components/FileUpload/UploadFullscreen.tsx b/src/components/FileUpload/UploadFullscreen.tsx
index aa965bba..992ae3a8 100644
--- a/src/components/FileUpload/UploadFullscreen.tsx
+++ b/src/components/FileUpload/UploadFullscreen.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
 import Dialog from "@material-ui/core/Dialog";
@@ -11,6 +11,8 @@ import FilePicker from "./FilePicker";
 
 import { actions as snackbarActions } from "~store/snackbar";
 
+declare let window: any;
+
 const Transition = props => <Slide direction={"up"} {...props} />;
 
 const contentSize = 320;
@@ -43,9 +45,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class UploadFullscreen extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -91,7 +95,7 @@ class UploadFullscreen extends React.Component<ReturnType<typeof mapStateToProps
             fileReader.onload = () => resolve(fileReader.result);
         }).then(fileArrayBuffer => {
             // transform array buffer into regular buffer
-            const fileBuffer = Buffer.from(fileArrayBuffer);
+            const fileBuffer = Buffer.from(fileArrayBuffer as any);
 
             BunqJSClient.api.attachmentPublic
                 .post(fileBuffer, file.type)
@@ -133,7 +137,7 @@ class UploadFullscreen extends React.Component<ReturnType<typeof mapStateToProps
                 </TranslateButton>
                 <div style={styles.content}>
                     <div style={styles.contentWrapper}>
-                        <Typography type={"headline"} style={styles.header}>
+                        <Typography /* type={"headline"} */ style={styles.header as CSSProperties}>
                             {t(this.props.headlineText)}
                         </Typography>
                         <FilePicker handleFileDrop={this.handleFileDrop} />
diff --git a/src/components/FilterComponents/AccountSelection.tsx b/src/components/FilterComponents/AccountSelection.tsx
index 7eb3ce33..024f7db2 100644
--- a/src/components/FilterComponents/AccountSelection.tsx
+++ b/src/components/FilterComponents/AccountSelection.tsx
@@ -1,5 +1,5 @@
 import BunqJSClient from "@bunq-community/bunq-js-client";
-import React from "react";
+import React, { CSSProperties } from "react";
 import { connect } from "react-redux";
 import Avatar from "@material-ui/core/Avatar";
 import IconButton from "@material-ui/core/IconButton";
@@ -109,7 +109,7 @@ class AccountSelection extends React.Component<ReturnType<typeof mapStateToProps
                 return (
                     <MenuItem key={key} onClick={this.addAccountId(account.id)}>
                         <ListItemIcon>
-                            <Avatar style={styles.bigAvatar}>
+                            <Avatar>
                                 <LazyAttachmentImage
                                     height={40}
                                     imageUUID={account.avatar.image[0].attachment_public_uuid}
@@ -144,7 +144,7 @@ class AccountSelection extends React.Component<ReturnType<typeof mapStateToProps
                         {accountMenuItems}
                     </Menu>
                 </ListSubheader>
-                <ListItem style={styles.listItem}>{selectedAccountChipItems}</ListItem>
+                <ListItem style={styles.listItem as CSSProperties}>{selectedAccountChipItems}</ListItem>
             </>
         );
     }
diff --git a/src/components/FilterComponents/AmountFilter.tsx b/src/components/FilterComponents/AmountFilter.tsx
index d73b2dc3..84b54261 100644
--- a/src/components/FilterComponents/AmountFilter.tsx
+++ b/src/components/FilterComponents/AmountFilter.tsx
@@ -16,7 +16,7 @@ interface IProps {
 }
 
 interface IState {
-
+    [key: string]: any;
 }
 
 class AmountFilter extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/components/FilterComponents/CardSelection.tsx b/src/components/FilterComponents/CardSelection.tsx
index 1387d12e..0e325134 100644
--- a/src/components/FilterComponents/CardSelection.tsx
+++ b/src/components/FilterComponents/CardSelection.tsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
 import Chip from "@material-ui/core/Chip";
-import Avatar from "@material-ui/core/Avatar";
 import IconButton from "@material-ui/core/IconButton";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
@@ -50,6 +49,7 @@ const styles: any = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
@@ -180,8 +180,8 @@ const mapStateToProps = (state: ReduxState) => {
         cards: state.cards.cards,
         cardsLoading: state.cards.loading,
 
-        selectedCardIds: state.card_id_filter.selected_card_ids,
-        toggleCardIds: state.card_id_filter.toggle
+        selectedCardIds: state.cardIdFilter.selected_card_ids,
+        toggleCardIds: state.cardIdFilter.toggle
     };
 };
 
diff --git a/src/components/FilterComponents/CategorySelection.tsx b/src/components/FilterComponents/CategorySelection.tsx
index 06632f0f..2a568105 100644
--- a/src/components/FilterComponents/CategorySelection.tsx
+++ b/src/components/FilterComponents/CategorySelection.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { connect } from "react-redux";
 import IconButton from "@material-ui/core/IconButton";
 import ListItem from "@material-ui/core/ListItem";
@@ -143,7 +143,7 @@ class CategorySelection extends React.Component<ReturnType<typeof mapStateToProp
                         {categoryMenuItems}
                     </Menu>
                 </ListSubheader>
-                <ListItem style={styles.listItem}>{categoryItems}</ListItem>
+                <ListItem style={styles.listItem as CSSProperties}>{categoryItems}</ListItem>
             </>
         );
     }
diff --git a/src/components/FilterComponents/ClearFilter.tsx b/src/components/FilterComponents/ClearFilter.tsx
index 6982b015..3edbb52d 100644
--- a/src/components/FilterComponents/ClearFilter.tsx
+++ b/src/components/FilterComponents/ClearFilter.tsx
@@ -11,10 +11,12 @@ import { resetFilters } from "~actions/filters";
 import { AppDispatch, ReduxState } from "~store/index";
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
     t: AppWindow["t"];
+    [key: string]: any;
 }
 
 class ClearFilter extends React.PureComponent<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/components/FilterComponents/FilterDrawer.tsx b/src/components/FilterComponents/FilterDrawer.tsx
index dd7b5f3c..860da460 100644
--- a/src/components/FilterComponents/FilterDrawer.tsx
+++ b/src/components/FilterComponents/FilterDrawer.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
 import DatePicker from "material-ui-pickers/DatePicker";
@@ -103,11 +103,11 @@ const styles = {
 };
 
 interface IProps {
-
+    [key: string]: any;
 }
 
 interface IState {
-
+    [key: string]: any;
 }
 
 class FilterDrawer extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -191,7 +191,7 @@ class FilterDrawer extends React.Component<ReturnType<typeof mapStateToProps> &
             this.props.dateToFilter !== null || this.props.dateFromFilter !== null || this.state.displayDateFilter;
 
         const drawerList = (
-            <List style={styles.list}>
+            <List style={styles.list as CSSProperties}>
                 <ListItem style={styles.textFieldListItem}>
                     <SearchFilter style={styles.textField} t={t} />
                 </ListItem>
@@ -216,7 +216,7 @@ class FilterDrawer extends React.Component<ReturnType<typeof mapStateToProps> &
                     <ListItem style={styles.radioListItem}>
                         <RadioGroup
                             name="payment-type"
-                            style={styles.radioGroup}
+                            style={styles.radioGroup as CSSProperties}
                             value={paymentType}
                             onChange={this.handlePaymentTypeChange}
                         >
@@ -258,7 +258,7 @@ class FilterDrawer extends React.Component<ReturnType<typeof mapStateToProps> &
                     <ListItem style={styles.radioListItem}>
                         <RadioGroup
                             name="request-type"
-                            style={styles.radioGroup}
+                            style={styles.radioGroup as CSSProperties}
                             value={requestType}
                             onChange={this.handleRequestTypeChange}
                         >
@@ -300,7 +300,7 @@ class FilterDrawer extends React.Component<ReturnType<typeof mapStateToProps> &
                     <ListItem style={styles.radioListItem}>
                         <RadioGroup
                             name="bunqmetab-type"
-                            style={styles.radioGroup}
+                            style={styles.radioGroup as CSSProperties}
                             value={bunqMeTabType}
                             onChange={this.handleBunqMeTabChange}
                         >
diff --git a/src/components/FilterComponents/SearchFilter.tsx b/src/components/FilterComponents/SearchFilter.tsx
index ced0d608..e77ad985 100644
--- a/src/components/FilterComponents/SearchFilter.tsx
+++ b/src/components/FilterComponents/SearchFilter.tsx
@@ -11,6 +11,7 @@ import { AppWindow } from "~app";
 import { AppDispatch, ReduxState } from "~store/index";
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
diff --git a/src/components/FormFields/AccountSelectorDialog.tsx b/src/components/FormFields/AccountSelectorDialog.tsx
index 5c458cbd..6b20dc05 100644
--- a/src/components/FormFields/AccountSelectorDialog.tsx
+++ b/src/components/FormFields/AccountSelectorDialog.tsx
@@ -63,6 +63,7 @@ const AccountItem = ({ account, onClick, hideBalance, shareInviteMonetaryAccount
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
diff --git a/src/components/FormFields/ColorPicker.tsx b/src/components/FormFields/ColorPicker.tsx
index cf47da4a..ef2bbf7d 100644
--- a/src/components/FormFields/ColorPicker.tsx
+++ b/src/components/FormFields/ColorPicker.tsx
@@ -19,9 +19,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class ColorPicker extends React.Component<IProps> {
diff --git a/src/components/FormFields/EmailSuggestions.tsx b/src/components/FormFields/EmailSuggestions.tsx
index f1ab57e2..5bd9cc93 100644
--- a/src/components/FormFields/EmailSuggestions.tsx
+++ b/src/components/FormFields/EmailSuggestions.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import TextField from "@material-ui/core/TextField";
 import Paper from "@material-ui/core/Paper";
 import ListItem from "@material-ui/core/ListItem";
@@ -19,9 +18,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class EmailSuggestions extends React.Component<IProps> {
diff --git a/src/components/FormFields/InputSuggestions.tsx b/src/components/FormFields/InputSuggestions.tsx
index c8f36a7b..963f3b6d 100644
--- a/src/components/FormFields/InputSuggestions.tsx
+++ b/src/components/FormFields/InputSuggestions.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React, { CSSProperties } from "react";
 import TextField from "@material-ui/core/TextField";
 import Paper from "@material-ui/core/Paper";
 import ListItem from "@material-ui/core/ListItem";
@@ -21,7 +20,18 @@ const styles = {
     }
 };
 
-class InputSuggestions extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class InputSuggestions extends React.Component<IProps> {
+    state: IState;
+    timeOut: null | number;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -40,7 +50,7 @@ class InputSuggestions extends React.Component {
 
     onBlur = event => {
         // delay so click event can react before onBlur
-        this.timeOut = setTimeout(() => {
+        this.timeOut = +setTimeout(() => {
             if (this.state.isMounted) {
                 this.setState({ visible: false, selectedIndex: 0 });
             }
@@ -170,7 +180,7 @@ class InputSuggestions extends React.Component {
                     {...otherProps}
                 />
                 {this.state.visible ? (
-                    <Paper key="paper-wrapper" style={styles.suggestionsWrapper} square>
+                    <Paper key="paper-wrapper" style={styles.suggestionsWrapper as CSSProperties} square>
                         {filteredItems.map((filteredItem, index) => (
                             <ListItem button key={index} onClick={this.onSelectItem(filteredItem)}>
                                 {index === this.state.selectedIndex ? (
@@ -192,9 +202,4 @@ class InputSuggestions extends React.Component {
     }
 }
 
-InputSuggestions.propTypes = {
-    itemSelected: PropTypes.func.isRequired,
-    InputComponent: PropTypes.node
-};
-
 export default InputSuggestions;
diff --git a/src/components/FormFields/MoneyFormatInputDefault.tsx b/src/components/FormFields/MoneyFormatInputDefault.tsx
index 0c3833a0..2690d3f3 100644
--- a/src/components/FormFields/MoneyFormatInputDefault.tsx
+++ b/src/components/FormFields/MoneyFormatInputDefault.tsx
@@ -6,7 +6,21 @@ import { preferedThousandSeparator, preferedDecimalSeparator } from "~functions/
 
 import { withTheme } from "@material-ui/core/styles";
 
-class MoneyFormatInputDefault extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class MoneyFormatInputDefault extends React.Component<IProps> {
+    state: IState;
+
+    static defaultProps = {
+        fontSize: 24
+    };
+
     NumberFormatCustom = props => {
         const { inputRef, fontSize, ...other } = props;
 
@@ -38,8 +52,4 @@ class MoneyFormatInputDefault extends React.Component {
     }
 }
 
-MoneyFormatInputDefault.defaultProps = {
-    fontSize: 24
-};
-
 export default withTheme()(MoneyFormatInputDefault);
diff --git a/src/components/FormFields/TargetSelection.tsx b/src/components/FormFields/TargetSelection.tsx
index e557bf33..98398a5b 100644
--- a/src/components/FormFields/TargetSelection.tsx
+++ b/src/components/FormFields/TargetSelection.tsx
@@ -36,9 +36,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class TargetSelection extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/components/GeoLocation/GeoLocationListItem.tsx b/src/components/GeoLocation/GeoLocationListItem.tsx
index 16c8e27a..5396dea7 100644
--- a/src/components/GeoLocation/GeoLocationListItem.tsx
+++ b/src/components/GeoLocation/GeoLocationListItem.tsx
@@ -3,7 +3,17 @@ import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import GeoLocationView from "./GeoLocationView";
 
-class GeoLocationListItem extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class GeoLocationListItem extends React.Component<IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
diff --git a/src/components/GeoLocation/GeoLocationMap.tsx b/src/components/GeoLocation/GeoLocationMap.tsx
index b7d738dd..214d537d 100644
--- a/src/components/GeoLocation/GeoLocationMap.tsx
+++ b/src/components/GeoLocation/GeoLocationMap.tsx
@@ -32,6 +32,7 @@ interface IState {
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class GeoLocationMap extends React.Component<ReturnType<typeof mapStateToProps> & IProps> {
diff --git a/src/components/GeoLocation/GeoLocationView.tsx b/src/components/GeoLocation/GeoLocationView.tsx
index 5aeb38f9..a96831ac 100644
--- a/src/components/GeoLocation/GeoLocationView.tsx
+++ b/src/components/GeoLocation/GeoLocationView.tsx
@@ -19,9 +19,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class GeoLocationView extends React.PureComponent<IProps> {
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index df361736..225ed703 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -73,9 +73,11 @@ const styles: any = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class Header extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -190,8 +192,11 @@ class Header extends React.Component<ReturnType<typeof mapStateToProps> & Return
 
 const mapStateToProps = (state: ReduxState) => {
     return {
+        // @ts-ignore
         stickyMenu: state.options.sticky_menu,
+        // @ts-ignore
         nativeFrame: state.options.native_frame,
+        // @ts-ignore
         minimizeToTray: state.options.minimize_to_tray,
 
         pdfSaveModeEnabled: state.application.pdf_save_mode_enabled,
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 81bfd2ba..da92084b 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,13 +1,13 @@
-import BunqJSClient from "@bunq-community/bunq-js-client";
 import React from "react";
 import { translate } from "react-i18next";
 import { connect } from "react-redux";
 import { ipcRenderer } from "electron";
-import { withRouter } from "react-router";
+import { RouterProps, withRouter } from "react-router";
 import Grid from "@material-ui/core/Grid";
 import { withStyles } from "@material-ui/core/styles";
 import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
 import createMuiTheme from "@material-ui/core/styles/createMuiTheme";
+
 import { AppWindow } from "~app";
 
 // custom components
@@ -26,6 +26,7 @@ import ErrorBoundary from "./ErrorBoundary";
 // themes
 import DefaultThemeConfig from "~themes/DefaultTheme";
 import DarkThemeConfig from "~themes/DarkTheme";
+
 const DefaultTheme = createMuiTheme(DefaultThemeConfig as any);
 const DarkTheme = createMuiTheme(DarkThemeConfig as any);
 const ThemeList = {
@@ -44,7 +45,7 @@ const openSnackbar = snackbarActions.open;
 
 declare let window: AppWindow;
 
-const styles = theme => ({
+const styles: any = theme => ({
     contentContainer: {
         margin: 0,
         marginLeft: 0,
@@ -67,9 +68,16 @@ const styles = theme => ({
 });
 
 interface IProps {
+    routesComponent: any;
+    history?: RouterProps["history"];
+    location?: AppWindow["location"];
+    t?: AppWindow["t"];
+    i18n?: any;
+    classes?: any;
 }
 
 interface IState {
+    [key: string]: any;
 }
 
 class Layout extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -130,8 +138,10 @@ class Layout extends React.Component<ReturnType<typeof mapStateToProps> & Return
 
     componentDidMount() {
         window.BunqDesktopClient.BunqJSClient.run(false)
-            .then(_ => {})
-            .catch(error => {});
+            .then(_ => {
+            })
+            .catch(error => {
+            });
 
         if (process.env.NODE_ENV !== "development") {
             VersionChecker().then(versionInfo => {
@@ -319,12 +329,19 @@ class Layout extends React.Component<ReturnType<typeof mapStateToProps> & Return
 
 const mapStateToProps = (state: ReduxState) => {
     return {
+        // @ts-ignore
         theme: state.options.theme,
+        // @ts-ignore
         language: state.options.language,
+        // @ts-ignore
         stickyMenu: state.options.sticky_menu,
+        // @ts-ignore
         hideBalance: state.options.hide_balance,
+        // @ts-ignore
         checkInactivity: state.options.check_inactivity,
+        // @ts-ignore
         automaticThemeChange: state.options.automatic_theme_change,
+        // @ts-ignore
         inactivityCheckDuration: state.options.inactivity_check_duration,
 
         derivedPassword: state.registration.derived_password,
@@ -348,7 +365,7 @@ const mapStateToProps = (state: ReduxState) => {
     };
 };
 
-const mapDispatchToProps = (dispatch: AppDispatch, ownProps: IProps) => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: (message, duration = 4000) => dispatch(openSnackbar({ message, duration })),
         openModal: (message, title) => dispatch(openModal(message, title)),
@@ -372,6 +389,6 @@ const mapDispatchToProps = (dispatch: AppDispatch, ownProps: IProps) => {
     };
 };
 
-export default withStyles(styles as any, { withTheme: true })(
+export default withStyles(styles, { withTheme: true })(
     withRouter(connect(mapStateToProps, mapDispatchToProps)(translate("translations")(Layout)))
-);
+) as never as React.FC<IProps>;
diff --git a/src/components/ListItems/BunqMeTabListItem.tsx b/src/components/ListItems/BunqMeTabListItem.tsx
index 5e5d5f38..9bff9045 100644
--- a/src/components/ListItems/BunqMeTabListItem.tsx
+++ b/src/components/ListItems/BunqMeTabListItem.tsx
@@ -44,7 +44,21 @@ const classStyles = theme => ({
     }
 });
 
-class BunqMeTabListItem extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class BunqMeTabListItem extends React.Component<IProps> {
+    static defaultProps = {
+        minimalDisplay: false
+    };
+
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -203,8 +217,4 @@ class BunqMeTabListItem extends React.Component {
     }
 }
 
-BunqMeTabListItem.defaultProps = {
-    minimalDisplay: false
-};
-
-export default withTheme()(translate("translations")(withStyles(classStyles)(BunqMeTabListItem)));
+export default withTheme()(translate("translations")(withStyles(classStyles)(BunqMeTabListItem as never as any)));
diff --git a/src/components/ListItems/MasterCardActionListItem.tsx b/src/components/ListItems/MasterCardActionListItem.tsx
index 1315a589..3021ee8c 100644
--- a/src/components/ListItems/MasterCardActionListItem.tsx
+++ b/src/components/ListItems/MasterCardActionListItem.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { translate } from "react-i18next";
 import { withTheme } from "@material-ui/core/styles";
-import ListItem from "@material-ui/core/ListItem";
+import OriginalListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import Avatar from "@material-ui/core/Avatar";
@@ -16,6 +16,8 @@ import { masterCardActionParser } from "~functions/EventStatusTexts";
 import { formatMoney } from "~functions/Utils";
 import { defaultMastercardImage } from "~functions/DefaultImageHandlers";
 
+const ListItem: any = OriginalListItem;
+
 const styles = {
     listItemText: {
         marginRight: 40
@@ -36,7 +38,19 @@ const styles = {
     }
 };
 
-class MasterCardActionListItem extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class MasterCardActionListItem extends React.Component<IProps> {
+    static defaultProps = {
+        minimalDisplay: false
+    };
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -90,8 +104,4 @@ class MasterCardActionListItem extends React.Component {
     }
 }
 
-MasterCardActionListItem.defaultProps = {
-    minimalDisplay: false
-};
-
 export default withTheme()(translate("translations")(MasterCardActionListItem));
diff --git a/src/components/ListItems/PaymentListItem.tsx b/src/components/ListItems/PaymentListItem.tsx
index a36219c9..adde658d 100644
--- a/src/components/ListItems/PaymentListItem.tsx
+++ b/src/components/ListItems/PaymentListItem.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { translate } from "react-i18next";
-import ListItem from "@material-ui/core/ListItem";
+import OrigListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import Avatar from "@material-ui/core/Avatar";
@@ -15,6 +15,8 @@ import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
 import MoneyAmountLabel from "../MoneyAmountLabel";
 import CategoryIcons from "../Categories/CategoryIcons";
 
+const ListItem: any = OrigListItem;
+
 const styles = {
     listItemText: {
         marginRight: 40
@@ -35,7 +37,22 @@ const styles = {
     }
 };
 
-class PaymentListItem extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class PaymentListItem extends React.Component<IProps> {
+    static defaultProps = {
+        displayRequestPayments: true,
+        minimalDisplay: false
+    };
+
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -93,6 +110,7 @@ class PaymentListItem extends React.Component {
 
         // if transfer between personal accounts
         if (counterpartyAccountInfo) {
+            // @ts-ignore
             primaryText = accountInfo.description;
 
             // on transfers we attempt to use our own alias instead
@@ -103,15 +121,14 @@ class PaymentListItem extends React.Component {
             // format secondary text
             const connectWord = paymentAmount < 0 ? fromText : toText;
             const connectWordSecondary = paymentAmount > 0 ? fromText : toText;
-            secondaryText = `${t("Transferred")} ${connectWord} ${accountInfo.description} ${connectWordSecondary} ${
-                counterpartyAccountInfo.description
-            }`;
+            // @ts-ignore
+            secondaryText = `${t("Transferred")} ${connectWord} ${accountInfo.description} ${connectWordSecondary} ${counterpartyAccountInfo.description}`;
         }
 
         const defaultImage = defaultPaymentImage(payment);
 
         return [
-            <ListItem button to={`/payment/${payment.id}/${payment.monetary_account_id}`} component={NavLink}>
+            <ListItem button to={`/payment/${payment.id}/${payment.monetary_account_id}`} component={NavLink as any}>
                 <Avatar style={styles.smallAvatar}>
                     <LazyAttachmentImage
                         height={50}
@@ -121,7 +138,7 @@ class PaymentListItem extends React.Component {
                 </Avatar>
                 <ListItemText style={styles.listItemText} primary={primaryText} secondary={secondaryText} />
                 <ListItemSecondaryAction style={styles.listItemSecondary}>
-                    <MoneyAmountLabel style={styles.moneyAmountLabel} info={payment} type="payment">
+                    <MoneyAmountLabel style={styles.moneyAmountLabel as any} info={payment} type="payment">
                         {formattedPaymentAmount}
                     </MoneyAmountLabel>
                     <CategoryIcons style={styles.categoryIcons} type={"Payment"} id={payment.id} />
@@ -132,9 +149,4 @@ class PaymentListItem extends React.Component {
     }
 }
 
-PaymentListItem.defaultProps = {
-    displayRequestPayments: true,
-    minimalDisplay: false
-};
-
 export default translate("translations")(PaymentListItem);
diff --git a/src/components/ListItems/RequestInquiryBatchListItem.tsx b/src/components/ListItems/RequestInquiryBatchListItem.tsx
index 58dd1579..2b1bfd21 100644
--- a/src/components/ListItems/RequestInquiryBatchListItem.tsx
+++ b/src/components/ListItems/RequestInquiryBatchListItem.tsx
@@ -43,7 +43,22 @@ const classStyles = theme => ({
     }
 });
 
-class RequestInquiryBatchListItem extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class RequestInquiryBatchListItem extends React.Component<IProps> {
+    static defaultProps = {
+        displayAcceptedRequests: true,
+        minimalDisplay: false
+    };
+
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -142,7 +157,9 @@ class RequestInquiryBatchListItem extends React.Component {
         if (monetaryAccountId) {
             // get monetary details for this batch
             monetaryAccountInfo = accounts.find(account => account.id === monetaryAccountId);
+            // @ts-ignore
             if (monetaryAccountInfo && monetaryAccountInfo.avatar) {
+                // @ts-ignore
                 imageUUID = monetaryAccountInfo.avatar.image[0].attachment_public_uuid;
             }
         }
@@ -186,6 +203,7 @@ class RequestInquiryBatchListItem extends React.Component {
                 const partString = `${requestItemCount} ${t(requestCounterType)}`;
 
                 // create a new string
+                // @ts-ignore
                 secondaryText = secondaryText === false ? partString : `${secondaryText}, ${partString}`;
             }
         });
@@ -250,9 +268,5 @@ class RequestInquiryBatchListItem extends React.Component {
     }
 }
 
-RequestInquiryBatchListItem.defaultProps = {
-    displayAcceptedRequests: true,
-    minimalDisplay: false
-};
-
+// @ts-ignore
 export default withTheme()(translate("translations")(withStyles(classStyles)(RequestInquiryBatchListItem)));
diff --git a/src/components/ListItems/RequestInquiryListItem.tsx b/src/components/ListItems/RequestInquiryListItem.tsx
index b4589b2b..f8e0b29a 100644
--- a/src/components/ListItems/RequestInquiryListItem.tsx
+++ b/src/components/ListItems/RequestInquiryListItem.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import ListItem from "@material-ui/core/ListItem";
+import OrigListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import { translate } from "react-i18next";
@@ -13,6 +13,8 @@ import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
 import CategoryIcons from "../Categories/CategoryIcons";
 import MoneyAmountLabel from "../MoneyAmountLabel";
 
+const ListItem: any = OrigListItem;
+
 const styles = {
     listItemText: {
         marginRight: 40
@@ -33,7 +35,22 @@ const styles = {
     }
 };
 
-class RequestInquiryListItem extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class RequestInquiryListItem extends React.Component<IProps> {
+    static defaultProps = {
+        displayAcceptedRequests: true,
+        minimalDisplay: false
+    };
+
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -85,9 +102,4 @@ class RequestInquiryListItem extends React.Component {
     }
 }
 
-RequestInquiryListItem.defaultProps = {
-    displayAcceptedRequests: true,
-    minimalDisplay: false
-};
-
 export default translate("translations")(RequestInquiryListItem);
diff --git a/src/components/ListItems/RequestResponseListItem.tsx b/src/components/ListItems/RequestResponseListItem.tsx
index 76924e7d..c2d311dc 100644
--- a/src/components/ListItems/RequestResponseListItem.tsx
+++ b/src/components/ListItems/RequestResponseListItem.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import ListItem from "@material-ui/core/ListItem";
+import OrigListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import { translate } from "react-i18next";
@@ -15,6 +15,8 @@ import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
 import CategoryIcons from "../Categories/CategoryIcons";
 import MoneyAmountLabel from "../MoneyAmountLabel";
 
+const ListItem: any = OrigListItem;
+
 const styles = {
     listItemText: {
         marginRight: 40
@@ -35,7 +37,22 @@ const styles = {
     }
 };
 
-class RequestResponseListItem extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class RequestResponseListItem extends React.Component<IProps> {
+    static defaultProps = {
+        displayAcceptedRequests: true,
+        minimalDisplay: false
+    };
+
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -94,9 +111,4 @@ class RequestResponseListItem extends React.Component {
     }
 }
 
-RequestResponseListItem.defaultProps = {
-    displayAcceptedRequests: true,
-    minimalDisplay: false
-};
-
 export default translate("translations")(RequestResponseListItem);
diff --git a/src/components/ListItems/ShareInviteBankTypes/DraftAccess.tsx b/src/components/ListItems/ShareInviteBankTypes/DraftAccess.tsx
index 09a0fa5e..59ecf210 100644
--- a/src/components/ListItems/ShareInviteBankTypes/DraftAccess.tsx
+++ b/src/components/ListItems/ShareInviteBankTypes/DraftAccess.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
@@ -14,7 +13,7 @@ const styles = {
     }
 };
 
-const DraftAccess = props => {
+const DraftAccess = (props: any = { secondaryActions: null }) => {
     return (
         <ListItem>
             <Avatar style={styles.smallAvatar}>
@@ -28,12 +27,4 @@ const DraftAccess = props => {
     );
 };
 
-DraftAccess.defaultProps = {
-    secondaryActions: null
-};
-
-DraftAccess.requiredProps = {
-    t: PropTypes.any.isRequired
-};
-
 export default DraftAccess;
diff --git a/src/components/ListItems/ShareInviteBankTypes/FullAccess.tsx b/src/components/ListItems/ShareInviteBankTypes/FullAccess.tsx
index 4e21c3ad..f9f1b840 100644
--- a/src/components/ListItems/ShareInviteBankTypes/FullAccess.tsx
+++ b/src/components/ListItems/ShareInviteBankTypes/FullAccess.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
@@ -14,7 +13,7 @@ const styles = {
     }
 };
 
-const FullAccess = props => {
+const FullAccess = (props: any = { secondaryActions: null }) => {
     return (
         <ListItem>
             <Avatar style={styles.smallAvatar}>
@@ -31,12 +30,4 @@ const FullAccess = props => {
     );
 };
 
-FullAccess.defaultProps = {
-    secondaryActions: null
-};
-
-FullAccess.requiredProps = {
-    t: PropTypes.any.isRequired
-};
-
 export default FullAccess;
diff --git a/src/components/ListItems/ShareInviteBankTypes/ShowOnly.tsx b/src/components/ListItems/ShareInviteBankTypes/ShowOnly.tsx
index b0088397..c241d07d 100644
--- a/src/components/ListItems/ShareInviteBankTypes/ShowOnly.tsx
+++ b/src/components/ListItems/ShareInviteBankTypes/ShowOnly.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
@@ -14,7 +13,7 @@ const styles = {
     }
 };
 
-const ShowOnly = props => {
+const ShowOnly = (props: any = { secondaryActions: null }) => {
     return (
         <ListItem>
             <Avatar style={styles.smallAvatar}>
@@ -28,12 +27,4 @@ const ShowOnly = props => {
     );
 };
 
-ShowOnly.defaultProps = {
-    secondaryActions: null
-};
-
-ShowOnly.requiredProps = {
-    t: PropTypes.any.isRequired
-};
-
 export default ShowOnly;
diff --git a/src/components/ListItems/ShareInviteMonetaryAccountInquiryListItem.tsx b/src/components/ListItems/ShareInviteMonetaryAccountInquiryListItem.tsx
index a5e5e103..a4af083f 100644
--- a/src/components/ListItems/ShareInviteMonetaryAccountInquiryListItem.tsx
+++ b/src/components/ListItems/ShareInviteMonetaryAccountInquiryListItem.tsx
@@ -7,6 +7,7 @@ import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import Avatar from "@material-ui/core/Avatar";
 import Divider from "@material-ui/core/Divider";
 import Collapse from "@material-ui/core/Collapse";
+import { AppWindow } from "~app";
 import { AppDispatch, ReduxState } from "~store/index";
 
 import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
@@ -17,6 +18,8 @@ import FullAccess from "./ShareInviteBankTypes/FullAccess";
 import DraftAccess from "./ShareInviteBankTypes/DraftAccess";
 import { shareInviteMonetaryAccountInquiriesInfoUpdate } from "~actions/share_invite_monetary_account_inquiries";
 
+declare let window: AppWindow;
+
 const styles = {
     listItemText: {
         marginRight: 40
@@ -31,12 +34,19 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class ShareInviteMonetaryAccountInquiryListItem extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    static defaultProps = {
+        displayAcceptedRequests: true,
+        minimalDisplay: false
+    };
+
     state: IState;
 
     constructor(props, context) {
@@ -142,11 +152,6 @@ class ShareInviteMonetaryAccountInquiryListItem extends React.Component<ReturnTy
     }
 }
 
-ShareInviteMonetaryAccountInquiryListItem.defaultProps = {
-    displayAcceptedRequests: true,
-    minimalDisplay: false
-};
-
 const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
@@ -156,8 +161,8 @@ const mapStateToProps = (state: ReduxState) => {
 
 const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
-        shareInviteMonetaryAccountInquiriesInfoUpdate: userId =>
-            dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(userId))
+        shareInviteMonetaryAccountInquiriesInfoUpdate: (userId, account_id) =>
+            dispatch(shareInviteMonetaryAccountInquiriesInfoUpdate(userId, account_id))
     };
 };
 export default connect(
diff --git a/src/components/ListItems/ShareInviteMonetaryAccountResponseListItem.tsx b/src/components/ListItems/ShareInviteMonetaryAccountResponseListItem.tsx
index 8fc93adc..44f767eb 100644
--- a/src/components/ListItems/ShareInviteMonetaryAccountResponseListItem.tsx
+++ b/src/components/ListItems/ShareInviteMonetaryAccountResponseListItem.tsx
@@ -7,6 +7,7 @@ import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
 import Avatar from "@material-ui/core/Avatar";
 import Divider from "@material-ui/core/Divider";
 import Collapse from "@material-ui/core/Collapse";
+import { AppWindow } from "~app";
 import { AppDispatch, ReduxState } from "~store/index";
 
 import LazyAttachmentImage from "../AttachmentImage/LazyAttachmentImage";
@@ -17,6 +18,8 @@ import FullAccess from "./ShareInviteBankTypes/FullAccess";
 import DraftAccess from "./ShareInviteBankTypes/DraftAccess";
 import { shareInviteMonetaryAccountResponsesInfoUpdate } from "~actions/share_invite_monetary_account_responses";
 
+declare let window: AppWindow;
+
 const styles = {
     listItemText: {
         marginRight: 40
@@ -31,12 +34,19 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class ShareInviteMonetaryAccountResponseListItem extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
+    static defaultProps = {
+        displayAcceptedRequests: true,
+        minimalDisplay: false
+    };
+
     state: IState;
 
     constructor(props, context) {
@@ -171,11 +181,6 @@ class ShareInviteMonetaryAccountResponseListItem extends React.Component<ReturnT
     }
 }
 
-ShareInviteMonetaryAccountResponseListItem.defaultProps = {
-    displayAcceptedRequests: true,
-    minimalDisplay: false
-};
-
 const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
diff --git a/src/components/MainDialog.tsx b/src/components/MainDialog.tsx
index 5965be93..336ad2be 100644
--- a/src/components/MainDialog.tsx
+++ b/src/components/MainDialog.tsx
@@ -16,9 +16,11 @@ const Transition = props => <Slide direction="left" {...props} />;
 import { closeModal } from "~actions/modal";
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class MainDialog extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/components/MainSnackbar.tsx b/src/components/MainSnackbar.tsx
index f34651f9..7ab8879a 100644
--- a/src/components/MainSnackbar.tsx
+++ b/src/components/MainSnackbar.tsx
@@ -16,9 +16,11 @@ const styles: any = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class MainSnackbar extends React.PureComponent<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -33,6 +35,7 @@ class MainSnackbar extends React.PureComponent<ReturnType<typeof mapStateToProps
         return (
             <Snackbar
                 ContentProps={{
+                    // @ts-ignore
                     headlineMapping: {
                         body1: "div",
                         body2: "div"
diff --git a/src/components/MoneyAmountLabel.tsx b/src/components/MoneyAmountLabel.tsx
index 6df861c0..52a08f77 100644
--- a/src/components/MoneyAmountLabel.tsx
+++ b/src/components/MoneyAmountLabel.tsx
@@ -1,8 +1,27 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { withTheme } from "@material-ui/core/styles";
 
-class MoneyAmountLabel extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    children: any;
+    info: any; // information about this payment/request
+    type: string; // requestResponse, requestInquiry etz
+    component: any;
+    style: any;
+    [key: string]: any;
+}
+
+class MoneyAmountLabel extends React.Component<IProps> {
+    static defaultProps = {
+        style: {},
+        component: "p"
+    };
+
+    state: IState;
+
     shouldComponentUpdate(nextProps) {
         if (nextProps.theme.themeName !== this.props.theme.themeName) return true;
         if (nextProps.children !== this.props.children) return true;
@@ -161,17 +180,4 @@ class MoneyAmountLabel extends React.Component {
     }
 }
 
-MoneyAmountLabel.defaultProps = {
-    style: {},
-    component: "p"
-};
-
-MoneyAmountLabel.propTypes = {
-    children: PropTypes.any.isRequired,
-    info: PropTypes.object.isRequired, // information about this payment/request
-    type: PropTypes.string.isRequired, // requestResponse, requestInquiry etz
-    component: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-    style: PropTypes.object
-};
-
 export default withTheme()(MoneyAmountLabel);
diff --git a/src/components/NoteTexts/NoteTextForm.tsx b/src/components/NoteTexts/NoteTextForm.tsx
index 8effdd6d..d07f9d47 100644
--- a/src/components/NoteTexts/NoteTextForm.tsx
+++ b/src/components/NoteTexts/NoteTextForm.tsx
@@ -32,9 +32,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class NoteTextForm extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/components/PDFExportHelper/PDFExportHelper.tsx b/src/components/PDFExportHelper/PDFExportHelper.tsx
index ce3aa8d4..d353c114 100644
--- a/src/components/PDFExportHelper/PDFExportHelper.tsx
+++ b/src/components/PDFExportHelper/PDFExportHelper.tsx
@@ -25,9 +25,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class PDFExportHelper extends React.PureComponent<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -197,6 +199,7 @@ class PDFExportHelper extends React.PureComponent<ReturnType<typeof mapStateToPr
 
 const mapStateToProps = (state: ReduxState) => {
     return {
+        // @ts-ignore
         theme: state.options.theme,
 
         pdfSaveModeEnabled: state.application.pdf_save_mode_enabled
diff --git a/src/components/QR/AccountQRCode.tsx b/src/components/QR/AccountQRCode.tsx
index 4e9c7737..5846df96 100644
--- a/src/components/QR/AccountQRCode.tsx
+++ b/src/components/QR/AccountQRCode.tsx
@@ -12,13 +12,20 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
     style: CSSProperties;
+    [key: string]: any;
 }
 
 class AccountQRCode extends React.Component<ReturnType<typeof mapStateToProps> & IProps> {
+    static defaultProps = {
+        accountId: false,
+        size: 195
+    };
+
     state: IState;
 
     constructor(props, context) {
@@ -43,6 +50,7 @@ class AccountQRCode extends React.Component<ReturnType<typeof mapStateToProps> &
 
         if (currentAccount === false) return null;
 
+        // @ts-ignore
         const value = `https://qr.bunq.com/2/8/${currentAccount.avatar.anchor_uuid}`;
 
         return (
@@ -55,11 +63,6 @@ class AccountQRCode extends React.Component<ReturnType<typeof mapStateToProps> &
     }
 }
 
-AccountQRCode.defaultProps = {
-    accountId: false,
-    size: 195
-};
-
 const mapStateToProps = (state: ReduxState) => {
     return {
         accounts: state.accounts.accounts,
diff --git a/src/components/QR/AccountQRFullscreen.tsx b/src/components/QR/AccountQRFullscreen.tsx
index 953cc3f0..0b9cd829 100644
--- a/src/components/QR/AccountQRFullscreen.tsx
+++ b/src/components/QR/AccountQRFullscreen.tsx
@@ -54,9 +54,15 @@ interface IState {
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class AccountQRFullscreen extends React.PureComponent<ReturnType<typeof mapStateToProps> & IProps> {
+    static defaultProps = {
+        accountId: false,
+        mode: "ACCOUNT"
+    };
+
     state: IState = {
         open: false
     };
@@ -84,6 +90,7 @@ class AccountQRFullscreen extends React.PureComponent<ReturnType<typeof mapState
                         accountInfo = account;
                     }
                 });
+                // @ts-ignore
                 accountInfo.alias.map(alias => {
                     if (alias.type === "IBAN") {
                         IBAN = alias.value;
@@ -97,10 +104,16 @@ class AccountQRFullscreen extends React.PureComponent<ReturnType<typeof mapState
                             <Avatar className={classes.bigAvatar}>
                                 <LazyAttachmentImage
                                     height={45}
-                                    imageUUID={accountInfo.avatar.image[0].attachment_public_uuid}
+                                    imageUUID={
+                                        // @ts-ignore
+                                        accountInfo.avatar.image[0].attachment_public_uuid
+                                    }
                                 />
                             </Avatar>
-                            <ListItemText primary={accountInfo.description} secondary={formatIban(IBAN)} />
+                            <ListItemText primary={
+                                // @ts-ignore
+                                accountInfo.description
+                            } secondary={formatIban(IBAN)} />
                         </ListItem>
                     </>
                 );
@@ -146,11 +159,6 @@ class AccountQRFullscreen extends React.PureComponent<ReturnType<typeof mapState
     }
 }
 
-AccountQRFullscreen.defaultProps = {
-    accountId: false,
-    mode: "ACCOUNT"
-};
-
 const mapStateToProps = (state: ReduxState) => {
     return {
         accounts: state.accounts.accounts,
@@ -158,4 +166,5 @@ const mapStateToProps = (state: ReduxState) => {
     };
 };
 
+// @ts-ignore
 export default withStyles(styles)(connect(mapStateToProps)(AccountQRFullscreen));
diff --git a/src/components/QR/QRCode.tsx b/src/components/QR/QRCode.tsx
index 5bcf09dc..c4d4c490 100644
--- a/src/components/QR/QRCode.tsx
+++ b/src/components/QR/QRCode.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import QRCodeReact from "qrcode.react";
-import PropTypes from "prop-types";
 
 const styles = {
     clickable: {
@@ -8,7 +7,20 @@ const styles = {
     }
 };
 
-class QRCode extends React.PureComponent {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class QRCode extends React.PureComponent<IProps> {
+    static defaultProps = {
+        size: 195,
+        style: {}
+    };
+
     render() {
         const { size, value, style, onClick, ...otherProps } = this.props;
 
@@ -23,21 +35,9 @@ class QRCode extends React.PureComponent {
                 value={value}
                 style={style}
                 onClick={qrOnClick}
-                style={onClick && styles.clickable}
             />
         );
     }
 }
 
-QRCode.defaultProps = {
-    size: 195,
-    style: {}
-};
-
-QRCode.propTypes = {
-    value: PropTypes.string.isRequired,
-    size: PropTypes.number,
-    style: PropTypes.object
-};
-
 export default QRCode;
diff --git a/src/components/Queue/QueueHeaderIcon.tsx b/src/components/Queue/QueueHeaderIcon.tsx
index fe7569b2..a739b49f 100644
--- a/src/components/Queue/QueueHeaderIcon.tsx
+++ b/src/components/Queue/QueueHeaderIcon.tsx
@@ -9,12 +9,12 @@ import SyncIcon from "@material-ui/icons/Sync";
 import { queueStartSync } from "~actions/queue";
 import { AppDispatch, ReduxState } from "~store/index";
 
-const styles = {};
-
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class QueueHeaderIcon extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/components/Queue/QueueManager.tsx b/src/components/Queue/QueueManager.tsx
index de7fae06..055de2c9 100644
--- a/src/components/Queue/QueueManager.tsx
+++ b/src/components/Queue/QueueManager.tsx
@@ -40,10 +40,11 @@ export const EVENT_TOTAL_LIMIT = 1000;
 declare let window: AppWindow;
 
 interface IProps {
-    BunqJSClient: BunqJSClient;
+    [key: string]: any;
 }
 
 interface IState {
+    [key: string]: any;
 }
 
 class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -217,9 +218,11 @@ class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> &
             if (newestPayment) newerPaymentCount += payments.filter(payment => payment.id > newestPayment.id).length;
 
             const newestBunqMeTab = this.props.bunqMeTabs.find(
+                // @ts-ignore
                 bunqMeTab => account.id === bunqMeTab.monetary_account_id
             );
             if (newestBunqMeTab)
+                // @ts-ignore
                 newerBunqMeTabsCount += bunqMeTabs.filter(bunqMeTab => bunqMeTab.id > newestBunqMeTab.id).length;
 
             const newestRequestResponse = this.props.requestResponses.find(
@@ -400,6 +403,7 @@ class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> &
         const nextEventCount = eventCount > 200 ? eventCount - 200 : 0;
         BunqJSClient.api.payment
             .list(user_id, account_id, {
+                // @ts-ignore
                 older_id: olderId,
                 count: currentEventCount
             })
@@ -454,7 +458,7 @@ class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> &
         const nextEventCount = eventCount > 200 ? eventCount - 200 : 0;
         BunqJSClient.api.bunqMeTabs
             .list(user_id, account_id, {
-                older_id: olderId,
+                older_id: +olderId,
                 count: currentEventCount
             })
             .then(bunqMeTabs => {
@@ -508,7 +512,7 @@ class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> &
         const nextEventCount = eventCount > 200 ? eventCount - 200 : 0;
         BunqJSClient.api.requestResponse
             .list(user_id, account_id, {
-                older_id: olderId,
+                older_id: +olderId,
                 count: currentEventCount
             })
             .then(requestResponses => {
@@ -620,7 +624,7 @@ class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> &
         const nextEventCount = eventCount > 200 ? eventCount - 200 : 0;
         BunqJSClient.api.requestInquiryBatch
             .list(user_id, account_id, {
-                older_id: olderId,
+                older_id: +olderId,
                 count: currentEventCount
             })
             .then(requestInquiryBatches => {
@@ -679,7 +683,7 @@ class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> &
         const nextEventCount = eventCount > 200 ? eventCount - 200 : 0;
         BunqJSClient.api.masterCardAction
             .list(user_id, account_id, {
-                older_id: olderId,
+                older_id: +olderId,
                 count: currentEventCount
             })
             .then(masterCardActions => {
@@ -737,12 +741,14 @@ class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> &
         const nextEventCount = eventCount > 200 ? eventCount - 200 : 0;
         BunqJSClient.api.shareInviteMonetaryAccountInquiry
             .list(user_id, account_id, {
-                older_id: olderId,
+                older_id: +olderId,
                 count: currentEventCount
             })
             .then(shareInviteBankInquiries => {
                 // more shareInviteBankInquiries can be loaded for this account
+                // @ts-ignore
                 if (shareInviteBankInquiries.length === currentEventCount && nextEventCount > 0) {
+                    // @ts-ignore
                     const oldestShareInviteMonetaryAccountInquiryIndex = shareInviteBankInquiries.length - 1;
                     const oldestShareInviteMonetaryAccountInquiry =
                         shareInviteBankInquiries[oldestShareInviteMonetaryAccountInquiryIndex];
@@ -763,6 +769,7 @@ class QueueManager extends React.Component<ReturnType<typeof mapStateToProps> &
                 // update the list for the account id
                 currentShareInviteBankInquiries[account_id] = [
                     ...accountShareInviteBankInquiries,
+                    // @ts-ignore
                     ...shareInviteBankInquiries
                 ];
 
@@ -811,16 +818,22 @@ const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
         userLoading: state.user.loading,
+        // @ts-ignore
         limitedPermissions: state.user.limited_permissions,
 
         accounts: state.accounts.accounts,
         accountsLoading: state.accounts.loading,
 
+        // @ts-ignore
         syncOnStartup: state.options.sync_on_startup,
+        // @ts-ignore
         eventCountLimit: state.options.event_count_limit,
 
+        // @ts-ignore
         automaticUpdateEnabled: state.options.automatic_update_enabled,
+        // @ts-ignore
         automaticUpdateSendNotification: state.options.automatic_update_send_notification,
+        // @ts-ignore
         automaticUpdateDuration: state.options.automatic_update_duration,
 
         queueRequestCounter: state.queue.request_counter,
@@ -839,7 +852,7 @@ const mapStateToProps = (state: ReduxState) => {
     };
 };
 
-const mapDispatchToProps = (dispatch: AppDispatch, ownProps: IProps) => {
+const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         openSnackbar: (message, duration = 4000) => dispatch(snackbarActions.open({ message, duration })),
 
diff --git a/src/components/Queue/QueueSidebarListItem.tsx b/src/components/Queue/QueueSidebarListItem.tsx
index 1a618619..14a727d5 100644
--- a/src/components/Queue/QueueSidebarListItem.tsx
+++ b/src/components/Queue/QueueSidebarListItem.tsx
@@ -17,9 +17,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class QueueSidebarListItem extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/components/ReactJsonWrapper.tsx b/src/components/ReactJsonWrapper.tsx
index 7967618f..f323656a 100644
--- a/src/components/ReactJsonWrapper.tsx
+++ b/src/components/ReactJsonWrapper.tsx
@@ -9,6 +9,7 @@ export default ({ style, data, name = null, ...rest }) => {
             name={name}
             theme="monokai"
             iconStyle="square"
+            // @ts-ignore
             enableEdit={false}
             enableAdd={false}
             enabledDelete={false}
diff --git a/src/components/ReduxForm/Fields/renderAccountsPicker.tsx b/src/components/ReduxForm/Fields/renderAccountsPicker.tsx
index 8c61ca2f..d399f009 100644
--- a/src/components/ReduxForm/Fields/renderAccountsPicker.tsx
+++ b/src/components/ReduxForm/Fields/renderAccountsPicker.tsx
@@ -8,6 +8,7 @@ import { ReduxState } from "~store/index";
 import AccountListItemChip from "../../AccountList/AccountListItemChip";
 
 interface IProps {
+    [key: string]: any;
 }
 
 const renderAccountsPicker = ({ t, i18n, tReady, input, label, meta: { error }, accounts, ...otherProps }: ReturnType<typeof mapStateToProps> & IProps) => {
diff --git a/src/components/ReduxForm/Fields/renderAmountField.tsx b/src/components/ReduxForm/Fields/renderAmountField.tsx
index d890e112..fa023852 100644
--- a/src/components/ReduxForm/Fields/renderAmountField.tsx
+++ b/src/components/ReduxForm/Fields/renderAmountField.tsx
@@ -37,7 +37,6 @@ const renderTextField = ({ t, i18n, tReady, input, formStyle = {}, label, meta:
         <FormControl
             key="inputWrapper"
             style={styles.formControl}
-            style={formStyle}
             error={touched && !!error}
             fullWidth
         >
diff --git a/src/components/Routes.tsx b/src/components/Routes.tsx
index e5fa23bf..ffae3099 100644
--- a/src/components/Routes.tsx
+++ b/src/components/Routes.tsx
@@ -166,8 +166,22 @@ const publicRoutes = [
     }
 ];
 
-// router react component
-export default class Routes extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    apiKey: false | string;
+    userType: false | string;
+    derivedPassword: false | string;
+    childProps: {
+        [key: string]: any;
+    };
+}
+
+export default class Routes extends React.Component<IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -191,6 +205,7 @@ export default class Routes extends React.Component {
         const stantardRouteComponents = standardRoutes.map((route, idx) => {
             const { component, ...props } = route;
             const Component = route.component;
+            // @ts-ignore
             return <Route key={idx} render={props => <Component {...props} {...this.props.childProps} />} {...props} />;
         });
 
@@ -214,8 +229,11 @@ export default class Routes extends React.Component {
                         {privateRouteComponents}
                         {stantardRouteComponents}
                         {publicRouteComponents}
-
-                        <Route render={props => <NotFound {...props} {...this.props.childProps} />} />
+                        <Route render={props => <NotFound
+                            {...props}
+                            // @ts-ignore
+                            {...this.props.childProps}
+                        />} />
                     </Switch>
                 )}
             />
diff --git a/src/components/Routing/NavLink.tsx b/src/components/Routing/NavLink.tsx
index 52db9825..fb3462ea 100644
--- a/src/components/Routing/NavLink.tsx
+++ b/src/components/Routing/NavLink.tsx
@@ -1,7 +1,9 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
 
-export default class NavLinkHelper extends React.Component {
+type IProps = React.ComponentProps<typeof NavLink>;
+
+export default class NavLinkHelper extends React.Component<IProps> {
     render() {
         return <NavLink {...this.props} activeClassName="active" />;
     }
diff --git a/src/components/Routing/PrivateRoute.tsx b/src/components/Routing/PrivateRoute.tsx
index 432778c7..325849ce 100644
--- a/src/components/Routing/PrivateRoute.tsx
+++ b/src/components/Routing/PrivateRoute.tsx
@@ -1,6 +1,10 @@
 import React from "react";
 import { Redirect, Route } from "react-router-dom";
 
+interface IProps {
+    [key: string]: any;
+}
+
 export default ({
     component: Component,
     apiKey,
@@ -9,7 +13,7 @@ export default ({
     ignoreApiKey = false,
     ignoreUserType = false,
     ...rest
-}) => {
+}: IProps) => {
     const componentHandler = rest.render ? rest.render : props => Component;
 
     // no user selected or no derived password set
diff --git a/src/components/Routing/PublicRoute.tsx b/src/components/Routing/PublicRoute.tsx
index 5b87aa2a..8db62049 100644
--- a/src/components/Routing/PublicRoute.tsx
+++ b/src/components/Routing/PublicRoute.tsx
@@ -1,7 +1,11 @@
 import React from "react";
 import { Redirect, Route } from "react-router-dom";
 
-export default ({ component: Component, derivedPassword, ...rest }) => {
+interface IProps {
+    [key: string]: any;
+}
+
+export default ({ component: Component, derivedPassword, ...rest }: IProps) => {
     const componentHandler = rest.render ? rest.render : props => Component;
 
     // no user selected
diff --git a/src/components/RuleCollectionChecker.tsx b/src/components/RuleCollectionChecker.tsx
index 31ffaf32..446fb822 100644
--- a/src/components/RuleCollectionChecker.tsx
+++ b/src/components/RuleCollectionChecker.tsx
@@ -9,12 +9,18 @@ import { AppDispatch, ReduxState } from "~store/index";
 import RuleCollection from "~models/RuleCollection";
 
 // import typed worker
-const RuleCollectionCheckWorker = require("worker-loader!../webworkers/rule_collection_check.worker.js");
+// TODO: find a way to support Jest
+let RuleCollectionCheckWorker: any;
+if (!process.env.JEST) {
+    RuleCollectionCheckWorker = require("worker-loader!../webworkers/rule_collection_check.worker.js");
+}
 
 interface IProps {
+    [key: string]: any;
 }
 
 interface IState {
+    [key: string]: any;
 }
 
 class RuleCollectionChecker extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -25,12 +31,14 @@ class RuleCollectionChecker extends React.Component<ReturnType<typeof mapStateTo
         super(props, context);
         this.state = {};
 
-        this.worker = new RuleCollectionCheckWorker();
-        this.worker.onmessage = this.handleWorkerEvent;
+        if (RuleCollectionCheckWorker) {
+            this.worker = new RuleCollectionCheckWorker();
+            this.worker.onmessage = this.handleWorkerEvent;
+        }
     }
 
     componentWillUnmount() {
-        this.worker.terminate();
+        this.worker?.terminate().then();
     }
 
     componentDidUpdate(oldProps) {
diff --git a/src/components/SavingsGoals/Helpers.ts b/src/components/SavingsGoals/Helpers.ts
index 71560ff8..8279da56 100644
--- a/src/components/SavingsGoals/Helpers.ts
+++ b/src/components/SavingsGoals/Helpers.ts
@@ -1,6 +1,5 @@
 import { connectGetBudget } from "~functions/ConnectGetPermissions";
 import { filterShareInviteMonetaryAccountResponses } from "~functions/DataFilters";
-import { formatMoney } from "~functions/Utils";
 
 export const calculateTotalBalance = (accounts, accountIds, shareInviteMonetaryAccountResponses = []) => {
     return accounts.reduce((accumulator, account) => {
@@ -16,6 +15,7 @@ export const calculateTotalBalance = (accounts, accountIds, shareInviteMonetaryA
             if (filteredResponses.length > 0) {
                 const connectBudget = connectGetBudget(filteredResponses);
                 if (connectBudget) {
+                    // @ts-ignore
                     accountBalance = parseFloat(connectBudget);
                 }
             }
diff --git a/src/components/SavingsGoals/SavingsGoalListItem.tsx b/src/components/SavingsGoals/SavingsGoalListItem.tsx
index 43ee9a3f..6c9337bb 100644
--- a/src/components/SavingsGoals/SavingsGoalListItem.tsx
+++ b/src/components/SavingsGoals/SavingsGoalListItem.tsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
-import ListItem from "@material-ui/core/ListItem";
+import OriginalListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import Typography from "@material-ui/core/Typography";
@@ -14,6 +14,8 @@ import NavLink from "../Routing/NavLink";
 
 import { formatMoney, humanReadableDate } from "~functions/Utils";
 
+const ListItem: any = OriginalListItem;
+
 const styles = {
     listItem: {
         padding: 8
@@ -58,7 +60,7 @@ export default props => {
     const minusAmount = percentage < 10 ? 10 : 15;
     const progressLabelStyle = { ...styles.progressLabel, left: `calc(${percentage}% - ${minusAmount}px` };
 
-    let listItemProps = {
+    let listItemProps: any = {
         button: true,
         component: NavLink,
         to: `/savings-goal-page/${savingsGoal.id}`
@@ -73,7 +75,7 @@ export default props => {
                 <ListItem {...listItemProps} key={savingsGoal.id} style={styles.listItem}>
                     <Grid container>
                         <Grid item xs={12} sm={8} md={9} style={styles.headerTextsGrid}>
-                            <Typography variant="h5" style={styles.title}>
+                            <Typography variant="h5">
                                 {savingsGoal.title}
                             </Typography>
                             {savingsGoal.description && (
@@ -81,13 +83,13 @@ export default props => {
                             )}
                         </Grid>
                         <Grid item xs={12} sm={4} md={3} style={styles.currentAmountGrid}>
-                            <Typography variant="h6" style={styles.currentAmountText}>
+                            <Typography variant="h6" style={styles.currentAmountText as CSSProperties}>
                                 {savedAmountText}
                             </Typography>
                         </Grid>
 
                         <Grid item xs={4} sm={3} md={2} lg={1}>
-                            <Typography variant="body2" style={styles.progressLabels}>
+                            <Typography variant="body2" style={styles.progressLabels as CSSProperties}>
                                 {startAmountText}
                             </Typography>
                         </Grid>
@@ -99,7 +101,7 @@ export default props => {
                             />
                         </Grid>
                         <Grid item xs={4} sm={3} md={2} lg={1}>
-                            <Typography variant="body2" style={styles.progressLabels}>
+                            <Typography variant="body2" style={styles.progressLabels as CSSProperties}>
                                 {endAmountText}
                             </Typography>
                         </Grid>
@@ -107,8 +109,8 @@ export default props => {
                         {percentage < 100 && (
                             <>
                                 <Grid item xs={4} sm={3} md={2} lg={1} />
-                                <Grid item xs={4} sm={6} md={8} lg={10} style={styles.progressLabelGrid}>
-                                    <div style={progressLabelStyle}>
+                                <Grid item xs={4} sm={6} md={8} lg={10} style={styles.progressLabelGrid as CSSProperties}>
+                                    <div style={progressLabelStyle as CSSProperties}>
                                         <Typography variant="body2">{percentage.toFixed(1)}%</Typography>
                                     </div>
                                 </Grid>
diff --git a/src/components/SavingsGoals/SavingsGoalListItemWrapper.tsx b/src/components/SavingsGoals/SavingsGoalListItemWrapper.tsx
index 88856530..d2fcb68b 100644
--- a/src/components/SavingsGoals/SavingsGoalListItemWrapper.tsx
+++ b/src/components/SavingsGoals/SavingsGoalListItemWrapper.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { ReduxState } from "~store/index";
 
@@ -9,6 +8,7 @@ import SavingsGoalSmallListItem from "./SavingsGoalSmallListItem";
 import SavingsGoal from "~models/SavingsGoal";
 
 interface IProps {
+    [key: string]: any;
 }
 
 const SavingsGoalListItemWrapper = (props: ReturnType<typeof mapStateToProps> & IProps) => {
@@ -22,7 +22,7 @@ const SavingsGoalListItemWrapper = (props: ReturnType<typeof mapStateToProps> &
         ...restProps
     } = props;
 
-    switch (type) {
+    switch (type ?? "regular") {
         case "regular":
             return (
                 <SavingsGoalListItem
@@ -49,16 +49,6 @@ const SavingsGoalListItemWrapper = (props: ReturnType<typeof mapStateToProps> &
     return null;
 };
 
-SavingsGoalListItemWrapper.defaultProps = {
-    type: "regular"
-};
-
-SavingsGoalListItemWrapper.propTypes = {
-    t: PropTypes.any.isRequired,
-    type: PropTypes.string.isRequired,
-    savingsGoal: PropTypes.instanceOf(SavingsGoal)
-};
-
 const mapStateToProps = (state: ReduxState) => {
     return {
         accounts: state.accounts.accounts,
diff --git a/src/components/SavingsGoals/SavingsGoalSmallListItem.tsx b/src/components/SavingsGoals/SavingsGoalSmallListItem.tsx
index adb8d175..125c1730 100644
--- a/src/components/SavingsGoals/SavingsGoalSmallListItem.tsx
+++ b/src/components/SavingsGoals/SavingsGoalSmallListItem.tsx
@@ -22,7 +22,7 @@ const SavingsGoalSmallListItem = props => {
     const { t, savingsGoal, accounts, shareInviteMonetaryAccountResponses } = props;
     const { percentage } = savingsGoal.getStatistics(accounts, shareInviteMonetaryAccountResponses);
 
-    let listItemProps = {
+    let listItemProps: any = {
         button: true,
         component: NavLink,
         to: `/savings-goal-page/${savingsGoal.id}`
diff --git a/src/components/SavingsGoals/SavingsGoalsList.tsx b/src/components/SavingsGoals/SavingsGoalsList.tsx
index c4001fbb..74aeef19 100644
--- a/src/components/SavingsGoals/SavingsGoalsList.tsx
+++ b/src/components/SavingsGoals/SavingsGoalsList.tsx
@@ -17,10 +17,11 @@ const styles = {
 };
 
 interface IProps {
+    [key: string]: any;
 }
 
 const SavingsGoalList = (props: ReturnType<typeof mapStateToProps> & IProps) => {
-    const { t, savingsGoals, type, hiddenTypes } = props;
+    const { t, savingsGoals, type = "regular", hiddenTypes = [] } = props;
 
     const savingsGoalsList = Object.keys(savingsGoals)
         .filter(savingsGoalId => {
@@ -36,6 +37,7 @@ const SavingsGoalList = (props: ReturnType<typeof mapStateToProps> & IProps) =>
             }
             return true;
         })
+        // @ts-ignore
         .sort((savingsGoalIdA, savingsGoalIdB) => {
             const savingsGoalA = savingsGoals[savingsGoalIdA];
             const savingsGoalB = savingsGoals[savingsGoalIdB];
@@ -72,11 +74,6 @@ const SavingsGoalList = (props: ReturnType<typeof mapStateToProps> & IProps) =>
     return null;
 };
 
-SavingsGoalList.defaultProps = {
-    type: "regular",
-    hiddenTypes: []
-};
-
 const mapStateToProps = (state: ReduxState) => {
     return {
         accounts: state.accounts.accounts,
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 4cafe110..33238c20 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,8 +1,7 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { translate } from "react-i18next";
 import { connect } from "react-redux";
 import { withStyles } from "@material-ui/core/styles";
-import PropTypes from "prop-types";
 import Drawer from "@material-ui/core/Drawer";
 import Hidden from "@material-ui/core/Hidden";
 import Avatar from "@material-ui/core/Avatar";
@@ -62,10 +61,12 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
     t: AppWindow["t"];
+    [key: string]: any;
 }
 
 class Sidebar extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -165,7 +166,7 @@ class Sidebar extends React.Component<ReturnType<typeof mapStateToProps> & Retur
             );
 
         const drawerList = (
-            <List style={styles.list}>
+            <List style={styles.list as CSSProperties}>
                 <NavLink to="/application-info" style={styles.bunqLink}>
                     <ListItem button>
                         <ListItemIcon>
@@ -245,6 +246,7 @@ class Sidebar extends React.Component<ReturnType<typeof mapStateToProps> & Retur
 const mapStateToProps = (state: ReduxState) => {
     return {
         open: state.sidebar.open,
+        // @ts-ignore
         stickyMenu: state.options.sticky_menu,
 
         pendingPayments: state.pending_payments.pending_payments,
@@ -254,6 +256,7 @@ const mapStateToProps = (state: ReduxState) => {
         apiKey: state.registration.api_key,
 
         userType: state.user.user_type,
+        // @ts-ignore
         limitedPermissions: state.user.limited_permissions
     };
 };
@@ -265,10 +268,7 @@ const mapDispatchToProps = (dispatch: AppDispatch) => {
     };
 };
 
-Sidebar.propTypes = {
-    classes: PropTypes.object.isRequired
-};
-
+// @ts-ignore
 export default withStyles(styles, { withTheme: true })(
     connect(mapStateToProps, mapDispatchToProps)(translate("translations")(Sidebar))
 );
diff --git a/src/components/SpeedDial.tsx b/src/components/SpeedDial.tsx
index 2311fd34..54755a9f 100644
--- a/src/components/SpeedDial.tsx
+++ b/src/components/SpeedDial.tsx
@@ -1,10 +1,12 @@
 import React from "react";
-import SpeedDial from "@material-ui/lab/SpeedDial";
+import OriginalSpeedDial from "@material-ui/lab/SpeedDial";
 import SpeedDialIcon from "@material-ui/lab/SpeedDialIcon";
 import SpeedDialAction from "@material-ui/lab/SpeedDialAction";
 
 import CloseIcon from "@material-ui/icons/Close";
 
+const SpeedDial: any = OriginalSpeedDial;
+
 const styles = {
     speedDial: {
         position: "fixed",
@@ -14,7 +16,26 @@ const styles = {
     }
 };
 
-class SpeedDialCustom extends React.Component {
+interface IState {
+    open: boolean;
+    forceOpen: boolean;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class SpeedDialCustom extends React.Component<IProps> {
+    state: IState;
+
+    static defaultProps = {
+        style: {},
+        actions: [],
+        ariaLabel: "More options",
+        hidden: false,
+        buttonColor: "primary"
+    };
+
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -24,7 +45,7 @@ class SpeedDialCustom extends React.Component {
     }
 
     handleClick = () => {
-        this.setState(state => ({
+        this.setState((state: IState) => ({
             open: !state.open,
             forceOpen: !state.forceOpen
         }));
@@ -82,12 +103,5 @@ class SpeedDialCustom extends React.Component {
         );
     }
 }
-SpeedDialCustom.defaultProps = {
-    style: {},
-    actions: [],
-    ariaLabel: "More options",
-    hidden: false,
-    buttonColor: "primary"
-};
 
 export default SpeedDialCustom;
diff --git a/src/components/SwitchKeysMenu.tsx b/src/components/SwitchKeysMenu.tsx
index dfb5b79e..a67729f2 100644
--- a/src/components/SwitchKeysMenu.tsx
+++ b/src/components/SwitchKeysMenu.tsx
@@ -1,10 +1,10 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { translate } from "react-i18next";
 import { connect } from "react-redux";
 import IconButton from "@material-ui/core/IconButton";
 import Drawer from "@material-ui/core/Drawer";
 import List from "@material-ui/core/List";
-import ListItem from "@material-ui/core/ListItem";
+import OriginalListItem from "@material-ui/core/ListItem";
 import ListItemText from "@material-ui/core/ListItemText";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import TextField from "@material-ui/core/TextField";
@@ -24,6 +24,8 @@ import {
     registrationSwitchKeys
 } from "~actions/registration";
 
+const ListItem: any = OriginalListItem;
+
 const styles = {
     list: {
         width: 250,
@@ -57,9 +59,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class SwitchKeysMenu extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -180,7 +184,7 @@ class SwitchKeysMenu extends React.Component<ReturnType<typeof mapStateToProps>
                         style: { top: 50 }
                     }}
                 >
-                    <List style={styles.list}>
+                    <List style={styles.list as CSSProperties}>
                         <div style={styles.textWrapper}>
                             <TranslateTypography variant="subtitle1">Stored API keys</TranslateTypography>
                             <TranslateTypography variant="body2">
@@ -228,6 +232,7 @@ const mapStateToProps = (state: ReduxState) => {
 
 const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
+        // @ts-ignore
         registrationSwitchKeys: storedKeyIndex => dispatch(registrationSwitchKeys(storedKeyIndex)),
 
         registrationSetStoredApiKeys: storedApiKeys => dispatch(registrationSetStoredApiKeys(storedApiKeys)),
diff --git a/src/components/TransactionHeader.tsx b/src/components/TransactionHeader.tsx
index e1144c33..3c3917e2 100644
--- a/src/components/TransactionHeader.tsx
+++ b/src/components/TransactionHeader.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import withTheme from "@material-ui/core/styles/withTheme";
 import Grid from "@material-ui/core/Grid";
 import Hidden from "@material-ui/core/Hidden";
@@ -89,7 +89,7 @@ const TransactionHeader = props => {
         fromIsCounterparty = false;
     }
 
-    let defaultImage = false;
+    let defaultImage: any = false;
     if (props.type && props.type) {
         if (props.type === "payment") {
             defaultImage = defaultPaymentImage(props.event);
@@ -103,7 +103,7 @@ const TransactionHeader = props => {
     }
 
     const components = [
-        <Grid item xs={12} md={4} style={styles.targetWrapper}>
+        <Grid item xs={12} md={4} style={styles.targetWrapper as CSSProperties}>
             <Avatar style={styles.avatar}>
                 <LazyAttachmentImage
                     height={90}
@@ -119,9 +119,9 @@ const TransactionHeader = props => {
         </Grid>,
 
         <Hidden smDown>
-            <Grid item md={4} style={{ ...styles.arrow, marginTop: 32 }}>
+            <Grid item md={4} style={({ ...styles.arrow, marginTop: 32 } as CSSProperties)}>
                 <Grid container>
-                    <Grid item xs={12} style={{ ...styles.arrow }}>
+                    <Grid item xs={12} style={({ ...styles.arrow }) as CSSProperties}>
                         <ArrowForwardIcon style={{ color: arrowColor }} color="inherit" />
                     </Grid>
                     {props.transferAmountComponent && (
@@ -134,7 +134,7 @@ const TransactionHeader = props => {
         </Hidden>,
 
         <Hidden mdUp>
-            <Grid item xs={12} style={styles.arrow}>
+            <Grid item xs={12} style={styles.arrow as CSSProperties}>
                 <Grid container>
                     {props.transferAmountComponent && (
                         <Grid item xs={12}>
@@ -148,7 +148,7 @@ const TransactionHeader = props => {
             </Grid>
         </Hidden>,
 
-        <Grid item xs={12} md={4} style={styles.targetWrapper}>
+        <Grid item xs={12} md={4} style={styles.targetWrapper as CSSProperties}>
             <Avatar style={styles.avatar}>
                 <LazyAttachmentImage
                     height={90}
@@ -201,4 +201,5 @@ const TransactionHeader = props => {
     return components;
 };
 
+// @ts-ignore
 export default withTheme()(TransactionHeader);
diff --git a/src/components/TranslationHelpers/Button.tsx b/src/components/TranslationHelpers/Button.tsx
index 31ec72f4..ab9bd25a 100644
--- a/src/components/TranslationHelpers/Button.tsx
+++ b/src/components/TranslationHelpers/Button.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import { translate } from "react-i18next";
-import Button from "@material-ui/core/Button";
+import OrigButton from "@material-ui/core/Button";
+
+const Button = OrigButton as never as any;
 
 const ButtonWrapper = ({ t, children, i18n, tReady, variant = "text", ...otherProps }) => {
     return (
diff --git a/src/components/react-app.tsx b/src/components/react-app.tsx
index 05a1c674..fa564c26 100644
--- a/src/components/react-app.tsx
+++ b/src/components/react-app.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import store from "store";
 import BunqJSClient from "@bunq-community/bunq-js-client";
+import { AppWindow } from "~app";
 import BunqDesktopClient from "./BunqDesktopClient";
 
 // bunqDesktop entry point
@@ -15,9 +16,12 @@ import "typeface-roboto";
 import Logger from "~functions/Logger";
 import Analytics from "~functions/Analytics";
 
+declare let window: AppWindow;
+
 Analytics();
 
 // create a new bunq js client and inject into the app
+// @ts-ignore
 const BunqJSClientInstance = new BunqJSClient(store, Logger);
 BunqJSClientInstance.setKeepAlive(false);
 
diff --git a/src/functions/Analytics.ts b/src/functions/Analytics.ts
index 015f647b..eccf27c2 100644
--- a/src/functions/Analytics.ts
+++ b/src/functions/Analytics.ts
@@ -1,9 +1,12 @@
 import store from "store";
+import { AppWindow } from "~app";
 import settings from "~importwrappers/electronSettings";
 import { generateGUID } from "./Utils";
 import Logger from "./Logger";
 import { ANALYTICS_ENABLED } from "~reducers/options";
 
+declare let window: AppWindow & { ga: any };
+
 export default (forceEnable = false) => {
     if (process.env.NODE_ENV === "development") {
         Logger.debug("Disabled GA: dev mode");
@@ -26,14 +29,14 @@ export default (forceEnable = false) => {
                 function() {
                     (i[r].q = i[r].q || []).push(arguments);
                 }),
-                (i[r].l = 1 * new Date());
+                (i[r].l = +new Date());
             (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
             a.async = 1;
             a.src = g;
             m.parentNode.insertBefore(a, m);
         })(window, document, "script", "https://www.google-analytics.com/analytics.js", "ga");
 
-        // give global access
+        // @ts-ignore give global access
         window.ga = ga;
     }
 
diff --git a/src/functions/BunqErrorHandler.ts b/src/functions/BunqErrorHandler.ts
index 2188bde9..addc80d6 100644
--- a/src/functions/BunqErrorHandler.ts
+++ b/src/functions/BunqErrorHandler.ts
@@ -1,5 +1,4 @@
 import { AppWindow } from "~app";
-import BunqDesktopClient from "~components/BunqDesktopClient";
 import { BatchedActions } from "~store/index";
 import Logger from "./Logger";
 
diff --git a/src/functions/Crypto/CryptoWorkerWrapper.ts b/src/functions/Crypto/CryptoWorkerWrapper.ts
index a02b6439..17c63dc9 100644
--- a/src/functions/Crypto/CryptoWorkerWrapper.ts
+++ b/src/functions/Crypto/CryptoWorkerWrapper.ts
@@ -1,13 +1,25 @@
 import store from "store";
-const CryptoWorker = require("worker-loader!../../webworkers/crypto.worker.js");
+import { AppWindow } from "~app";
+let CryptoWorker;
+// TODO: find a solution to support Jest
+if (!process.env.JEST) {
+    require("worker-loader!../../webworkers/crypto.worker.js");
+}
+
+declare let window: AppWindow;
+
+export class CryptoWorkerQueue {
+    queue: any;
+    worker: any;
 
-class CryptoWorkerQueue {
     constructor() {
         this.queue = {};
 
         // setup a new cryptoWorker
-        this.worker = new CryptoWorker();
-        this.worker.onmessage = this.onMessage;
+        if (CryptoWorker) {
+            this.worker = new CryptoWorker();
+            this.worker.onmessage = this.onMessage;
+        }
     }
 
     addTask = task => {
@@ -95,7 +107,7 @@ export const storeEncryptString = async (data, location, encryptionKey, type = "
 
     // stringify the data
     const jsonData = JSON.stringify(data);
-    const encryptedDetails = await window.cryptoWorkerQueue.addTask({
+    const encryptedDetails: any = await window.cryptoWorkerQueue.addTask({
         type: "ENCRYPT",
         encryptionKey: encryptionKey,
         data: jsonData
diff --git a/src/functions/Logger.ts b/src/functions/Logger.ts
index cf1d96cd..c3639d49 100644
--- a/src/functions/Logger.ts
+++ b/src/functions/Logger.ts
@@ -2,7 +2,7 @@
 const remote = require("electron").remote;
 const electronLog = remote ? remote.require("electron-log") : require("electron-log");
 
-const Logger = {
+export default {
     log: params => {
         console.log(params);
         electronLog.log(params);
@@ -30,14 +30,10 @@ const Logger = {
     silly: params => {
         console.debug(params);
         electronLog.silly(params);
-    }
+    },
+    transports: electronLog.transports,
+    variables: electronLog.variables,
+    default: electronLog.default,
+    hooks: electronLog.hooks,
+    isDev: electronLog.isDev,
 };
-
-Logger.catchErrors = electronLog.catchErrors;
-Logger.transports = electronLog.transports;
-Logger.variables = electronLog.variables;
-Logger.default = electronLog.default;
-Logger.hooks = electronLog.hooks;
-Logger.isDev = electronLog.isDev;
-
-export default Logger;
diff --git a/src/functions/PhoneLib.ts b/src/functions/PhoneLib.ts
index df2c6249..1ccb3981 100644
--- a/src/functions/PhoneLib.ts
+++ b/src/functions/PhoneLib.ts
@@ -1,6 +1,6 @@
-import { parsePhoneNumber } from "libphonenumber-js";
+import { CountryCode, parsePhoneNumber } from "libphonenumber-js";
 
-export const isValidPhonenumber = (number, region = "NL") => {
+export const isValidPhonenumber = (number, region: CountryCode = "NL") => {
     try {
         const phoneNumber = parsePhoneNumber(number, region);
         return phoneNumber.isValid();
@@ -8,7 +8,7 @@ export const isValidPhonenumber = (number, region = "NL") => {
     return false;
 };
 
-export const getInternationalFormat = (number, region = "NL") => {
+export const getInternationalFormat = (number, region: CountryCode = "NL") => {
     try {
         const phoneNumber = parsePhoneNumber(number, region);
         const formattedPhone = phoneNumber.formatInternational();
diff --git a/src/functions/Utils.ts b/src/functions/Utils.ts
index ce50b76f..017fcf6a 100644
--- a/src/functions/Utils.ts
+++ b/src/functions/Utils.ts
@@ -1,3 +1,7 @@
+import { AppWindow } from "~app";
+
+declare let window: AppWindow;
+
 /**
  * Turn first character into uppercase
  * @param str
@@ -77,7 +81,7 @@ export const anonymizedHandlerKeys = Object.keys(anonymizedHandlers);
  * @param object
  * @returns {*}
  */
-export const anonymizeObject = (object, key = false) => {
+export const anonymizeObject = (object: any, key: any = false) => {
     // this could be an item itself
     if (key) {
         if (anonymizeKeys.includes(key)) {
diff --git a/src/functions/VersionChecker.ts b/src/functions/VersionChecker.ts
index 02ed3c19..88c170f9 100644
--- a/src/functions/VersionChecker.ts
+++ b/src/functions/VersionChecker.ts
@@ -17,6 +17,7 @@ const isSemVer = (function() {
             ? (c ? d[1] || "==" : "") +
                   '"' +
                   (d[2] + ".0.0").match(/\d+(?:\.\d+){0,2}/)[0].replace(/(?:^|\.)(\d+)/g, function(g, f) {
+                      // @ts-ignore
                       return Array(9 - f.length).join(0) + f;
                   }) +
                   (d[3] || "~") +
@@ -26,6 +27,7 @@ const isSemVer = (function() {
             : 1;
     }
     return function(e) {
+        // @ts-ignore
         e = b(e);
         for (var c, d = 1; (c = arguments[d++]); ) {
             if (!new Function("return " + e + b(c, 1))()) {
@@ -46,6 +48,7 @@ export default async () => {
         return {
             currentVersion: currentVersion,
             latestVersion: latestVersion,
+            // @ts-ignore
             newerLink: isSemVer(currentVersion, `<${latestVersion}`) ? response.html_url : false
         };
     } catch (ex) {
diff --git a/src/helpers/context_menu.ts b/src/helpers/context_menu.ts
index 9f0bd455..f730c6fd 100644
--- a/src/helpers/context_menu.ts
+++ b/src/helpers/context_menu.ts
@@ -41,16 +41,19 @@ textEditingMenu.append(paste);
 
 document.addEventListener(
     "contextmenu",
-    event => {
+    (event) => {
+        // @ts-ignore
         switch (event.target.nodeName) {
             case "TEXTAREA":
             case "INPUT":
                 event.preventDefault();
+                // @ts-ignore
                 textEditingMenu.popup(remote.getCurrentWindow());
                 break;
             default:
                 if (isAnyTextSelected()) {
                     event.preventDefault();
+                    // @ts-ignore
                     normalMenu.popup(remote.getCurrentWindow());
                 }
         }
diff --git a/src/helpers/oauth.ts b/src/helpers/oauth.ts
index bb012a28..1349263e 100644
--- a/src/helpers/oauth.ts
+++ b/src/helpers/oauth.ts
@@ -90,10 +90,13 @@ export default (window, log) => {
             }
 
             // check if we received an access token
+            // @ts-ignore
             if (params.code) {
+                // @ts-ignore
                 log.debug("Received OAuth code: " + params.code.substring(0, 8));
 
                 // send data to renderer view
+                // @ts-ignore
                 window.webContents.send("received-oauth-bunq-code", params.code);
             } else {
                 window.webContents.send("received-oauth-failed");
@@ -109,6 +112,7 @@ export default (window, log) => {
             handleUrl(receivedUrl);
         });
 
+        // @ts-ignore
         consentWindow.webContents.on("did-get-redirect-request", function(event, oldUrl, newUrl) {
             handleUrl(newUrl);
         });
@@ -137,8 +141,10 @@ export default (window, log) => {
             }
 
             // check if we received an access token
+            // @ts-ignore
             if (params.access_token) {
                 // send data to renderer view
+                // @ts-ignore
                 window.webContents.send("received-oauth-google-access-token", params.access_token);
             } else {
                 window.webContents.send("received-oauth-failed");
@@ -154,6 +160,7 @@ export default (window, log) => {
             handleUrl(receivedUrl);
         });
 
+        // @ts-ignore
         consentWindow.webContents.on("did-get-redirect-request", function(event, oldUrl, newUrl) {
             handleUrl(newUrl);
         });
@@ -181,13 +188,16 @@ export default (window, log) => {
                 // Try to exchange the param values for an access token.
             }
             if (params["#access_token"]) {
+                // @ts-ignore
                 params.access_token = params["#access_token"];
                 delete params["#access_token"];
             }
 
             // check if we received an access token
+            // @ts-ignore
             if (params.access_token) {
                 // send data to renderer view
+                // @ts-ignore
                 window.webContents.send("received-oauth-office-365-access-token", params.access_token);
             } else {
                 window.webContents.send("received-oauth-failed");
@@ -203,6 +213,7 @@ export default (window, log) => {
             handleUrl(receivedUrl);
         });
 
+        // @ts-ignore
         consentWindow.webContents.on("did-get-redirect-request", function(event, oldUrl, newUrl) {
             handleUrl(newUrl);
         });
diff --git a/src/helpers/touchbar.ts b/src/helpers/touchbar.ts
index 9adf0d0b..6303e57d 100644
--- a/src/helpers/touchbar.ts
+++ b/src/helpers/touchbar.ts
@@ -52,6 +52,7 @@ export default (window, i18n) => {
         updateQueueButton.label = `🔄 ${newEventCount} new events`;
     });
 
+    // @ts-ignore
     const bar = new TouchBar([dashboardButton, updateQueueButton, payButton, requestButton, bunqMeButton, cardsButton]);
 
     window.setTouchBar(bar);
diff --git a/src/helpers/tray.ts b/src/helpers/tray.ts
index e693bab9..ff4e892f 100644
--- a/src/helpers/tray.ts
+++ b/src/helpers/tray.ts
@@ -57,6 +57,7 @@ export default (mainWindow, trayIcon) => {
             }
         ];
 
+        // @ts-ignore
         const contextMenu = Menu.buildFromTemplate(menuItems);
 
         tray.setContextMenu(contextMenu);
diff --git a/src/menu/dev_menu_template.ts b/src/menu/dev_menu_template.ts
index 7e55063c..62aa0a6e 100644
--- a/src/menu/dev_menu_template.ts
+++ b/src/menu/dev_menu_template.ts
@@ -14,6 +14,7 @@ export const devMenuTemplate = {
             label: "Toggle DevTools",
             accelerator: "Alt+CmdOrCtrl+I",
             click: () => {
+                // @ts-ignore
                 BrowserWindow.getFocusedWindow().toggleDevTools();
             }
         },
diff --git a/src/models/SavingsGoal.ts b/src/models/SavingsGoal.ts
index 9f717061..2e98a077 100644
--- a/src/models/SavingsGoal.ts
+++ b/src/models/SavingsGoal.ts
@@ -31,7 +31,7 @@ export default class SavingsGoal {
 
     private _rawData: any;
 
-    constructor(savingsGoalObject: any | undefined) {
+    constructor(savingsGoalObject?: any) {
         if (!savingsGoalObject) return this;
 
         this._rawData = savingsGoalObject;
diff --git a/src/pages/AccountInfo.tsx b/src/pages/AccountInfo.tsx
index 3f322f9a..9bf266bc 100644
--- a/src/pages/AccountInfo.tsx
+++ b/src/pages/AccountInfo.tsx
@@ -107,9 +107,11 @@ const PersonChip = ({ alias, ...otherProps }) => {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class AccountInfo extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/AddAccount.tsx b/src/pages/AddAccount.tsx
index c2e60c76..83f49495 100644
--- a/src/pages/AddAccount.tsx
+++ b/src/pages/AddAccount.tsx
@@ -48,9 +48,11 @@ const styles: any = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class AddAccount extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/ApplicationInfo.tsx b/src/pages/ApplicationInfo.tsx
index 77b83784..5fab84e4 100644
--- a/src/pages/ApplicationInfo.tsx
+++ b/src/pages/ApplicationInfo.tsx
@@ -40,9 +40,11 @@ const styles: any = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class ApplicationInfo extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/BunqMePersonal/BunqMePersonal.tsx b/src/pages/BunqMePersonal/BunqMePersonal.tsx
index 0f270de8..e6a1be59 100644
--- a/src/pages/BunqMePersonal/BunqMePersonal.tsx
+++ b/src/pages/BunqMePersonal/BunqMePersonal.tsx
@@ -64,9 +64,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class BunqMePersonal extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/BunqMePersonal/LinkPreviewField.tsx b/src/pages/BunqMePersonal/LinkPreviewField.tsx
index 97cc25ad..9f8516ae 100644
--- a/src/pages/BunqMePersonal/LinkPreviewField.tsx
+++ b/src/pages/BunqMePersonal/LinkPreviewField.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { withStyles } from "@material-ui/core/styles";
 import Paper from "@material-ui/core/Paper";
 import InputBase from "@material-ui/core/InputBase";
@@ -53,11 +52,4 @@ const LinkPreviewField = props => {
     );
 };
 
-LinkPreviewField.propTypes = {
-    classes: PropTypes.object.isRequired,
-
-    value: PropTypes.string.isRequired,
-    reset: PropTypes.func.isRequired
-};
-
 export default withStyles(styles)(LinkPreviewField);
diff --git a/src/pages/BunqMeTab/BunqMeTab.tsx b/src/pages/BunqMeTab/BunqMeTab.tsx
index b19ed2ea..048348ce 100644
--- a/src/pages/BunqMeTab/BunqMeTab.tsx
+++ b/src/pages/BunqMeTab/BunqMeTab.tsx
@@ -23,9 +23,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class BunqMeTab extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/BunqMeTab/ConfirmationDialog.tsx b/src/pages/BunqMeTab/ConfirmationDialog.tsx
index 8b139362..2b02629d 100644
--- a/src/pages/BunqMeTab/ConfirmationDialog.tsx
+++ b/src/pages/BunqMeTab/ConfirmationDialog.tsx
@@ -12,7 +12,15 @@ import { formatMoney } from "~functions/Utils";
 
 import TranslateButton from "~components/TranslationHelpers/Button";
 
-class ConfirmationDialog extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class ConfirmationDialog extends React.Component<IProps> {
     render() {
         const { confirmModalOpen, description, amount, t } = this.props;
 
diff --git a/src/pages/Cards/Cards.tsx b/src/pages/Cards/Cards.tsx
index ccd7b362..f5b74793 100644
--- a/src/pages/Cards/Cards.tsx
+++ b/src/pages/Cards/Cards.tsx
@@ -53,9 +53,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class Cards extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/Cards/CvcCodeListItem.tsx b/src/pages/Cards/CvcCodeListItem.tsx
index fd9b6d91..2197110f 100644
--- a/src/pages/Cards/CvcCodeListItem.tsx
+++ b/src/pages/Cards/CvcCodeListItem.tsx
@@ -13,9 +13,11 @@ import { cardGenerateCvc2, cardUpdateCvc2Codes } from "~store/cardCvc2/thunks";
 import { AppDispatch, ReduxState } from "~store/index";
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class CvcCodeListItem extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/Cards/VirtualAccountNumbersDialog.tsx b/src/pages/Cards/VirtualAccountNumbersDialog.tsx
index 64487689..1afec01d 100644
--- a/src/pages/Cards/VirtualAccountNumbersDialog.tsx
+++ b/src/pages/Cards/VirtualAccountNumbersDialog.tsx
@@ -18,9 +18,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class VirtualAccountNumbersDialog extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/CategoryDashboard/CategoryDashboard.tsx b/src/pages/CategoryDashboard/CategoryDashboard.tsx
index 2c39bda3..04bd360d 100644
--- a/src/pages/CategoryDashboard/CategoryDashboard.tsx
+++ b/src/pages/CategoryDashboard/CategoryDashboard.tsx
@@ -30,9 +30,11 @@ const styles: any = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class CategoryDashboard extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/Connect/Connect.tsx b/src/pages/Connect/Connect.tsx
index dce6612d..f6c4f493 100644
--- a/src/pages/Connect/Connect.tsx
+++ b/src/pages/Connect/Connect.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { translate } from "react-i18next";
 import { connect } from "react-redux";
 import Helmet from "react-helmet";
-import Redirect from "react-router-dom/Redirect";
+import { Redirect } from "react-router-dom";
 import EmailValidator from "email-validator";
 import format from "date-fns/format";
 
@@ -59,9 +59,11 @@ const styles: any = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class Connect extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/Connect/ConnectListItem.tsx b/src/pages/Connect/ConnectListItem.tsx
index ae8a6f26..6d9ad897 100644
--- a/src/pages/Connect/ConnectListItem.tsx
+++ b/src/pages/Connect/ConnectListItem.tsx
@@ -22,9 +22,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class ConnectListItem extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/Contacts/ContactHeader.tsx b/src/pages/Contacts/ContactHeader.tsx
index e9d4b67d..734e64d1 100644
--- a/src/pages/Contacts/ContactHeader.tsx
+++ b/src/pages/Contacts/ContactHeader.tsx
@@ -1,16 +1,18 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { translate } from "react-i18next";
 import Grid from "@material-ui/core/Grid";
-import Button from "@material-ui/core/Button";
+import OriginalButton from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
 import IconButton from "@material-ui/core/IconButton";
 
 import HelpIcon from "@material-ui/icons/Help";
+import { AppWindow } from "~app";
 
 import TranslateTypography from "~components/TranslationHelpers/Typography";
 import TranslateButton from "~components/TranslationHelpers/Button";
 
+const Button: any = OriginalButton;
+
 const styles = {
     title: {
         margin: 16
@@ -35,7 +37,26 @@ const styles = {
     }
 };
 
-const ContactHeader = props => {
+interface IProps {
+    contacts: any;
+    t: AppWindow["t"];
+    clear: any;
+
+    contactType: string;
+    login: Function;
+    import: Function;
+    loading: boolean;
+    canImport: boolean;
+    logo: string;
+    title: string;
+
+    questionLink?: string;
+
+    loginButtonText?: string;
+    importButtonText?: string;
+}
+
+const ContactHeader = (props: IProps) => {
     const { t, contacts, contactType } = props;
 
     // fallback to empty list
@@ -76,7 +97,7 @@ const ContactHeader = props => {
                         disabled={props.loading}
                         onClick={props.import}
                     >
-                        {t(props.importButtonText)}
+                        {t(props.importButtonText ?? "Import")}
                     </Button>
                 ) : (
                     <Button
@@ -86,7 +107,7 @@ const ContactHeader = props => {
                         disabled={props.loading}
                         onClick={props.login}
                     >
-                        {t(props.loginButtonText)}
+                        {t(props.loginButtonText ?? "Login")}
                     </Button>
                 )}
             </Grid>
@@ -113,25 +134,4 @@ const ContactHeader = props => {
     );
 };
 
-ContactHeader.propTypes = {
-    contactType: PropTypes.string.isRequired,
-    login: PropTypes.func.isRequired,
-    import: PropTypes.func.isRequired,
-    loading: PropTypes.bool.isRequired,
-    canImport: PropTypes.bool.isRequired,
-    logo: PropTypes.string.isRequired,
-    contactType: PropTypes.string.isRequired,
-    title: PropTypes.string.isRequired,
-
-    questionLink: PropTypes.string,
-
-    loginButtonText: PropTypes.string,
-    importButtonText: PropTypes.string
-};
-
-ContactHeader.defaultProps = {
-    loginButtonText: "Login",
-    importButtonText: "Import"
-};
-
 export default translate("translations")(ContactHeader);
diff --git a/src/pages/Contacts/Contacts.tsx b/src/pages/Contacts/Contacts.tsx
index 31b09913..bf9ebda7 100644
--- a/src/pages/Contacts/Contacts.tsx
+++ b/src/pages/Contacts/Contacts.tsx
@@ -41,9 +41,11 @@ const styles: any = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class Contacts extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/Dashboard/AddMoneyButton.tsx b/src/pages/Dashboard/AddMoneyButton.tsx
index b6079924..cd6848f2 100644
--- a/src/pages/Dashboard/AddMoneyButton.tsx
+++ b/src/pages/Dashboard/AddMoneyButton.tsx
@@ -10,9 +10,12 @@ import { requestInquirySend } from "~actions/request_inquiry";
 import { AppDispatch, ReduxState } from "~store/index";
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    // TODO: create IUser interface
+    user: any;
 }
 
 class AddMoneyButton extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -70,6 +73,7 @@ const mapStateToProps = (state: ReduxState) => {
     return {
         requestInquiryLoading: state.request_inquiry.loading,
 
+        // @ts-ignore
         limitedPermissions: state.user.limited_permissions,
 
         selectedAccount: state.accounts.selectedAccount,
diff --git a/src/pages/Dashboard/Dashboard.tsx b/src/pages/Dashboard/Dashboard.tsx
index 5cdbf1aa..cd7d049d 100644
--- a/src/pages/Dashboard/Dashboard.tsx
+++ b/src/pages/Dashboard/Dashboard.tsx
@@ -1,7 +1,8 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { translate } from "react-i18next";
 import { connect } from "react-redux";
 import Helmet from "react-helmet";
+import { RouterProps } from "react-router";
 import StickyBox from "react-sticky-box";
 import Paper from "@material-ui/core/Paper";
 import Grid from "@material-ui/core/Grid";
@@ -64,10 +65,12 @@ const styles = {
 };
 
 interface IState {
+    selectedTab: string;
 }
 
 interface IProps {
     t: AppWindow["t"];
+    history: RouterProps["history"];
 }
 
 class Dashboard extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -181,7 +184,7 @@ class Dashboard extends React.Component<ReturnType<typeof mapStateToProps> & Ret
                             </div>
                         </Grid>
 
-                        <Grid item xs={6} style={styles.headerButtonWrapper}>
+                        <Grid item xs={6} style={styles.headerButtonWrapper as CSSProperties}>
                             <SwitchKeysMenu history={this.props.history} />
 
                             <Tooltip id="tooltip-fab" title={t("Logout")}>
@@ -259,10 +262,12 @@ const mapStateToProps = (state: ReduxState) => {
         user: state.user.user,
         userType: state.user.user_type,
         userLoading: state.user.loading,
+        // @ts-ignore
         limitedPermissions: state.user.limited_permissions,
         usersLoading: state.users.loading,
 
         requestInquiryLoading: state.request_inquiry.loading,
+        // @ts-ignore
         selectedAccount: state.accounts.selected_account,
 
         savingsGoals: state.savings_goals.savings_goals,
diff --git a/src/pages/DebugPage.tsx b/src/pages/DebugPage.tsx
index 23713410..fae53401 100644
--- a/src/pages/DebugPage.tsx
+++ b/src/pages/DebugPage.tsx
@@ -15,9 +15,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class DebugPage extends React.Component<ReturnType<typeof mapStateToProps> & IProps> {
diff --git a/src/pages/Disclaimer.tsx b/src/pages/Disclaimer.tsx
index 6445cde2..01652b17 100644
--- a/src/pages/Disclaimer.tsx
+++ b/src/pages/Disclaimer.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { translate } from "react-i18next";
 import { connect } from "react-redux";
-import Redirect from "react-router-dom/Redirect";
+import { Redirect } from "react-router-dom";
 import Helmet from "react-helmet";
 import store from "store";
 import Grid from "@material-ui/core/Grid";
@@ -14,7 +14,6 @@ import Typography from "@material-ui/core/Typography";
 import LockIcon from "@material-ui/icons/Lock";
 import DesktopIcon from "@material-ui/icons/DesktopMac";
 import BuildIcon from "@material-ui/icons/Edit";
-import LiveHelpIcon from "@material-ui/icons/LiveHelp";
 import { AppWindow } from "~app";
 
 import TranslateButton from "~components/TranslationHelpers/Button";
@@ -34,6 +33,7 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
diff --git a/src/pages/Exports.tsx b/src/pages/Exports.tsx
index eaef653d..00f4b714 100644
--- a/src/pages/Exports.tsx
+++ b/src/pages/Exports.tsx
@@ -76,6 +76,7 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
index 5743ee40..13b8079e 100644
--- a/src/pages/Login/Login.tsx
+++ b/src/pages/Login/Login.tsx
@@ -1,13 +1,12 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { translate } from "react-i18next";
 import { Redirect } from "react-router-dom";
 import { connect } from "react-redux";
 import Helmet from "react-helmet";
-import axios from "axios";
 import Grid from "@material-ui/core/Grid";
 import IconButton from "@material-ui/core/IconButton";
 import Input from "@material-ui/core/Input";
-import Button from "@material-ui/core/Button";
+import OrigButton from "@material-ui/core/Button";
 import Typography from "@material-ui/core/Typography";
 import Card from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
@@ -35,6 +34,8 @@ import BunqErrorHandler from "~functions/BunqErrorHandler";
 
 declare let window: AppWindow;
 
+const Button: any = OrigButton;
+
 const styles = {
     card: {
         width: 250
@@ -110,13 +111,17 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class Login extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
     state: IState;
+    displayQrCodeDelay: any;
+    checkerInterval: null | number;
 
     constructor(props, context) {
         super(props, context);
@@ -195,7 +200,7 @@ class Login extends React.Component<ReturnType<typeof mapStateToProps> & ReturnT
         if (this.displayQrCodeDelay) clearTimeout(this.displayQrCodeDelay);
     }
 
-    registrationLogin = (apiKey = false, permittedIps = false) => {
+    registrationLogin = (apiKey = false, permittedIps: false | Array<any> = false) => {
         this.props.registrationLogin(
             apiKey || false,
             this.state.deviceName,
@@ -290,7 +295,7 @@ class Login extends React.Component<ReturnType<typeof mapStateToProps> & ReturnT
     // check if the qr code has been scanned yet
     checkForScanEvent = () => {
         const BunqJSClient = window.BunqDesktopClient.BunqJSClient;
-        this.checkerInterval = setInterval(() => {
+        this.checkerInterval = +setInterval(() => {
             // only continue if requestUuid isn't set yet and the qr code is open
             if (this.state.requestUuid !== false && this.state.tabIndex === 0) {
                 BunqJSClient.checkCredentialStatus(this.state.requestUuid)
@@ -423,8 +428,8 @@ class Login extends React.Component<ReturnType<typeof mapStateToProps> & ReturnT
             this.props.registrationLoading === true;
 
         const apiKeyContent = hasNoApiKey ? (
-            <div style={styles.cardWrapper}>
-                <div style={styles.cardWrapperInner}>
+            <div style={styles.cardWrapper as CSSProperties}>
+                <div style={styles.cardWrapperInner as CSSProperties}>
                     <AppBar position="static" color="default">
                         <Tabs variant="fullWidth" value={this.state.tabIndex} onChange={this.handleTabChange}>
                             <Tab style={styles.tab} label="API key" />
@@ -442,7 +447,7 @@ class Login extends React.Component<ReturnType<typeof mapStateToProps> & ReturnT
 
                     {this.state.tabIndex === 0 && (
                         <Card style={styles.card}>
-                            <CardContent style={styles.cardContent}>
+                            <CardContent style={styles.cardContent as CSSProperties}>
                                 <div style={{ textAlign: "center" }}>
                                     {this.state.requestQrCodeBase64 === false ? (
                                         <div style={styles.qrCode}>
@@ -515,7 +520,7 @@ class Login extends React.Component<ReturnType<typeof mapStateToProps> & ReturnT
             </div>
         ) : (
             <Card style={styles.card}>
-                <CardContent style={styles.cardContent}>
+                <CardContent style={styles.cardContent as CSSProperties}>
                     <TranslateTypography variant="h5" component="h2" style={styles.text}>
                         You're logged in!
                     </TranslateTypography>
@@ -535,7 +540,7 @@ class Login extends React.Component<ReturnType<typeof mapStateToProps> & ReturnT
 
         const cardContent = this.props.registrationLoading ? (
             <Card style={styles.card}>
-                <CardContent style={styles.cardContent}>
+                <CardContent style={styles.cardContent as CSSProperties}>
                     <TranslateTypography variant="h5" component="h2" style={styles.text}>
                         Loading
                     </TranslateTypography>
diff --git a/src/pages/Login/OAuthManagement.tsx b/src/pages/Login/OAuthManagement.tsx
index c4438bcb..bbb8959a 100644
--- a/src/pages/Login/OAuthManagement.tsx
+++ b/src/pages/Login/OAuthManagement.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { translate } from "react-i18next";
 import { connect } from "react-redux";
 import { ipcRenderer } from "electron";
@@ -9,6 +9,7 @@ import InputLabel from "@material-ui/core/InputLabel";
 import FormControl from "@material-ui/core/FormControl";
 import CardContent from "@material-ui/core/CardContent";
 import CircularProgress from "@material-ui/core/CircularProgress";
+import { AppWindow } from "~app";
 
 import TranslateTypography from "~components/TranslationHelpers/Typography";
 import TranslateButton from "~components/TranslationHelpers/Button";
@@ -20,6 +21,8 @@ import { oauthSetDetails } from "~actions/oauth";
 import { AppDispatch, ReduxState } from "~store/index";
 import { actions as snackbarActions } from "~store/snackbar";
 
+declare let window: AppWindow;
+
 const styles = {
     button: {
         width: "100%",
@@ -67,9 +70,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class OAuthManagement extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -232,6 +237,7 @@ class OAuthManagement extends React.Component<ReturnType<typeof mapStateToProps>
             () => {
                 // waited for state to update and now save the details if valid
                 if (clientSecretValid && clientIdValid) {
+                    // @ts-ignore
                     this.setOauthDetails();
                 }
             }
@@ -249,6 +255,7 @@ class OAuthManagement extends React.Component<ReturnType<typeof mapStateToProps>
             () => {
                 // waited for state to update and now save the details if valid
                 if (clientSecretValid && clientIdValid) {
+                    // @ts-ignore
                     this.setOauthDetails();
                 }
             }
@@ -264,7 +271,7 @@ class OAuthManagement extends React.Component<ReturnType<typeof mapStateToProps>
         const clientSecretValid = sandboxMode ? this.state.sandboxClientSecretValid : this.state.clientIdValid;
 
         const content = this.isLoading ? (
-            <Grid item xs={12} style={styles.cardContent}>
+            <Grid item xs={12} style={styles.cardContent as CSSProperties}>
                 <TranslateTypography variant="h5" component="h2" style={styles.text}>
                     Waiting for authorization
                 </TranslateTypography>
@@ -322,7 +329,7 @@ class OAuthManagement extends React.Component<ReturnType<typeof mapStateToProps>
         return (
             <>
                 <Card style={styles.card}>
-                    <CardContent style={styles.cardContent}>
+                    <CardContent style={styles.cardContent as CSSProperties}>
                         <Grid container spacing={8} justify={"center"}>
                             {content}
                         </Grid>
@@ -353,6 +360,7 @@ const mapDispatchToProps = (dispatch: AppDispatch) => {
         oauthSetDetails: (clientId, clientSecret, sandboxClientId, sandboxClientSecret) =>
             dispatch(oauthSetDetails(clientId, clientSecret, sandboxClientId, sandboxClientSecret)),
 
+        // @ts-ignore
         handleBunqError: (error, customError) => BunqErrorHandler(dispatch, error, customError)
     };
 };
diff --git a/src/pages/Login/SideOptions.tsx b/src/pages/Login/SideOptions.tsx
index 7da70f1d..6be890c1 100644
--- a/src/pages/Login/SideOptions.tsx
+++ b/src/pages/Login/SideOptions.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import Input from "@material-ui/core/Input";
 import Switch from "@material-ui/core/Switch";
 import Card from "@material-ui/core/Card";
@@ -72,8 +72,8 @@ export default props => {
 
     return (
         openOptions && (
-            <Card style={styles.card} className="animated fadeIn">
-                <CardContent style={styles.cardContent}>
+            <Card style={styles.card as CSSProperties} className="animated fadeIn">
+                <CardContent style={styles.cardContent as CSSProperties}>
                     <FormControl style={styles.formControl}>
                         <InputLabel style={styles.inputLabel}>API Key</InputLabel>
                         <Input
diff --git a/src/pages/LoginPassword.tsx b/src/pages/LoginPassword.tsx
index fac8f9a0..162ed821 100644
--- a/src/pages/LoginPassword.tsx
+++ b/src/pages/LoginPassword.tsx
@@ -1,7 +1,7 @@
-import React from "react";
+import React, { RefObject } from "react";
 import { translate } from "react-i18next";
 import { connect } from "react-redux";
-import Redirect from "react-router-dom/Redirect";
+import { Redirect } from "react-router-dom";
 import Helmet from "react-helmet";
 import store from "store";
 import Grid from "@material-ui/core/Grid";
@@ -71,13 +71,17 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class LoginPassword extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
     state: IState;
+    passwordInput: RefObject<any>;
+    passwordRepeatInput: RefObject<any>;
 
     constructor(props, context) {
         super(props, context);
@@ -168,17 +172,23 @@ class LoginPassword extends React.Component<ReturnType<typeof mapStateToProps> &
     toggleShowPassword = event => {
         this.setState({ showPassword: !this.state.showPassword });
         setTimeout(() => {
-            this.passwordInput.focus();
-            this.passwordInput.selectionStart = 1000;
-            this.passwordInput.selectionEnd = 1000;
+            // @ts-ignore
+            this.passwordInput.current.focus();
+            // @ts-ignore
+            this.passwordInput.current.selectionStart = 1000;
+            // @ts-ignore
+            this.passwordInput.current.selectionEnd = 1000;
         }, 300);
     };
     toggleShowPasswordRepeat = event => {
         this.setState({ showPasswordRepeat: !this.state.showPasswordRepeat });
         setTimeout(() => {
-            this.passwordRepeatInput.focus();
-            this.passwordRepeatInput.selectionStart = 1000;
-            this.passwordRepeatInput.selectionEnd = 1000;
+            // @ts-ignore
+            this.passwordRepeatInput.current.focus();
+            // @ts-ignore
+            this.passwordRepeatInput.current.selectionStart = 1000;
+            // @ts-ignore
+            this.passwordRepeatInput.current.selectionEnd = 1000;
         }, 300);
     };
 
@@ -229,7 +239,7 @@ class LoginPassword extends React.Component<ReturnType<typeof mapStateToProps> &
             registrationLoading === true;
 
         let cardContent = registrationLoading ? (
-            <CardContent style={styles.cardContent}>
+            <CardContent style={styles.cardContent as any}>
                 <Typography variant="h5" component="h2">
                     Loading
                 </Typography>
@@ -239,7 +249,7 @@ class LoginPassword extends React.Component<ReturnType<typeof mapStateToProps> &
                 </Typography>
             </CardContent>
         ) : (
-            <CardContent style={styles.cardContent}>
+            <CardContent style={styles.cardContent as any}>
                 <Typography variant="h5" component="h2" style={styles.text}>
                     {isExistingInstallation ? t("Enter your password") : t("Enter a password")}
                 </Typography>
@@ -398,7 +408,7 @@ class LoginPassword extends React.Component<ReturnType<typeof mapStateToProps> &
 const mapStateToProps = (state: ReduxState) => {
     return {
         statusMessage: state.application.status_message,
-
+        // @ts-ignore
         analyticsEnabled: state.options.analytics_enabled,
 
         storedApiKeys: state.registration.stored_api_keys,
@@ -415,9 +425,11 @@ const mapStateToProps = (state: ReduxState) => {
 const mapDispatchToProps = (dispatch: AppDispatch) => {
     return {
         // use no password
+        // @ts-ignore
         useNoPasswordLogin: () => dispatch(registrationSkipPassword()),
 
         // use password
+        // @ts-ignore
         usePasswordLogin: password => dispatch(registrationSetPassword(password)),
 
         // clear api key from bunqjsclient and bunqdesktop
diff --git a/src/pages/MasterCardActionInfo.tsx b/src/pages/MasterCardActionInfo.tsx
index 41633b69..7123d855 100644
--- a/src/pages/MasterCardActionInfo.tsx
+++ b/src/pages/MasterCardActionInfo.tsx
@@ -50,9 +50,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class MasterCardActionInfo extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx
index 37d0f62f..3aa7bbc1 100644
--- a/src/pages/NotFound.tsx
+++ b/src/pages/NotFound.tsx
@@ -4,7 +4,15 @@ import { translate } from "react-i18next";
 
 import TranslateTypography from "~components/TranslationHelpers/Typography";
 
-class NotFound extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class NotFound extends React.Component<IProps> {
     constructor(props, context) {
         super(props, context);
         this.state = {};
diff --git a/src/pages/Pay/ConfirmationDialog.tsx b/src/pages/Pay/ConfirmationDialog.tsx
index 6866be7b..f4f8efa9 100644
--- a/src/pages/Pay/ConfirmationDialog.tsx
+++ b/src/pages/Pay/ConfirmationDialog.tsx
@@ -18,9 +18,11 @@ import { ReduxState } from "~store/index";
 const styles = {};
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class ConfirmationDialog extends React.Component<ReturnType<typeof mapStateToProps> & IProps> {
diff --git a/src/pages/Pay/Pay.tsx b/src/pages/Pay/Pay.tsx
index 4a0f6775..d96941e2 100644
--- a/src/pages/Pay/Pay.tsx
+++ b/src/pages/Pay/Pay.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { translate } from "react-i18next";
 import { connect } from "react-redux";
 import Helmet from "react-helmet";
@@ -12,7 +12,7 @@ import DateFnsUtils from "material-ui-pickers/utils/date-fns-utils";
 import MuiPickersUtilsProvider from "material-ui-pickers/MuiPickersUtilsProvider";
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
-import Button from "@material-ui/core/Button";
+import OrigButton from "@material-ui/core/Button";
 import Switch from "@material-ui/core/Switch";
 import TextField from "@material-ui/core/TextField";
 import InputLabel from "@material-ui/core/InputLabel";
@@ -47,6 +47,8 @@ import { filterShareInviteMonetaryAccountResponses } from "~functions/DataFilter
 import scheduleTexts from "~functions/ScheduleTexts";
 import { connectGetBudget, connectGetType, connectGetPermissions } from "~functions/ConnectGetPermissions";
 
+const Button: any = OrigButton;
+
 const styles = {
     payButton: {
         width: "100%",
@@ -74,9 +76,16 @@ const styles = {
 };
 
 interface IState {
+    target: any;
+    ibanName: any;
+    selectedAccount: any;
+    selectedTargetAccount: any;
+    targetType: any;
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class Pay extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -566,6 +575,7 @@ class Pay extends React.Component<ReturnType<typeof mapStateToProps> & ReturnTyp
             };
 
             if (scheduleEndDate) {
+                // @ts-ignore
                 schedule.time_end = format(getUTCDate(scheduleEndDate), "yyyy-MM-dd HH:mm:ss");
             }
 
@@ -631,10 +641,12 @@ class Pay extends React.Component<ReturnType<typeof mapStateToProps> & ReturnTyp
             if (filteredInviteResponses.length > 0) {
                 const connectBudget = connectGetBudget(filteredInviteResponses);
                 if (connectBudget) {
+                    // @ts-ignore
                     accountBalance = connectBudget;
                 }
             }
         }
+        // @ts-ignore
         accountBalance = formatMoney(accountBalance, true);
 
         let scheduledPaymentText = null;
@@ -678,7 +690,7 @@ class Pay extends React.Component<ReturnType<typeof mapStateToProps> & ReturnTyp
         }
 
         return (
-            <Grid container spacing={8} justify="center" align="center">
+            <Grid container spacing={8} justify="center" alignContent="center">
                 <Helmet>
                     <title>{`bunqDesktop - Pay`}</title>
                 </Helmet>
@@ -718,7 +730,7 @@ class Pay extends React.Component<ReturnType<typeof mapStateToProps> & ReturnTyp
                             </Grid>
 
                             <Grid item xs={12}>
-                                <Paper style={styles.paper}>
+                                <Paper style={styles.paper as CSSProperties}>
                                     <Typography variant="h5">{t("New Payment")}</Typography>
 
                                     <AccountSelectorDialog
@@ -877,6 +889,7 @@ const mapStateToProps = (state: ReduxState) => {
         accounts: state.accounts.accounts,
         selectedAccount: state.accounts.selectedAccount,
 
+        // @ts-ignore
         language: state.options.language,
 
         pendingPayments: state.pending_payments.pending_payments,
@@ -885,6 +898,8 @@ const mapStateToProps = (state: ReduxState) => {
             state.share_invite_monetary_account_responses.share_invite_monetary_account_responses,
 
         user: state.user.user,
+
+        // @ts-ignore
         limitedPermissions: state.user.limited_permissions
     };
 };
diff --git a/src/pages/PaymentInfo.tsx b/src/pages/PaymentInfo.tsx
index b502f0d7..3919d25b 100644
--- a/src/pages/PaymentInfo.tsx
+++ b/src/pages/PaymentInfo.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { CSSProperties } from "react";
 import { translate } from "react-i18next";
 import { connect } from "react-redux";
 import { ipcRenderer } from "electron";
@@ -52,9 +52,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class PaymentInfo extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -181,12 +183,15 @@ class PaymentInfo extends React.Component<ReturnType<typeof mapStateToProps> & R
                 )
             };
             if (paymentInfo.getDelta() < 0) {
+                // @ts-ignore
                 transactionHeaderProps.onRequest = this.onRequest;
             } else {
+                // @ts-ignore
                 transactionHeaderProps.onForward = this.onForward;
             }
 
             content = (
+                // @ts-ignore
                 <Grid container spacing={24} align={"center"} justify={"center"}>
                     <TransactionHeader {...transactionHeaderProps} />
 
@@ -198,7 +203,7 @@ class PaymentInfo extends React.Component<ReturnType<typeof mapStateToProps> & R
                     />
 
                     <Grid item xs={12}>
-                        <List style={styles.list}>
+                        <List style={styles.list as CSSProperties}>
                             <Divider />
                             <ListItem>
                                 <ListItemText primary={paymentLabel} />
@@ -236,7 +241,7 @@ class PaymentInfo extends React.Component<ReturnType<typeof mapStateToProps> & R
                             ) : null}
 
                             <Divider />
-                            <GeoLocationListItem t={t} geoLocation={paymentInfo.geolocation} />
+                            <GeoLocationListItem geoLocation={paymentInfo.geolocation} />
                         </List>
 
                         <CategoryChips type={"Payment"} id={payment.id} />
diff --git a/src/pages/PendingPayments/PendingPaymentRow.tsx b/src/pages/PendingPayments/PendingPaymentRow.tsx
index a595ba2c..ad999b18 100644
--- a/src/pages/PendingPayments/PendingPaymentRow.tsx
+++ b/src/pages/PendingPayments/PendingPaymentRow.tsx
@@ -39,6 +39,7 @@ export default ({ pendingPayment, selectedCheckBoxes, accounts, togglePaymentChe
     if (paymentObject.counterparty_aliases) {
         targetComponents = <TargetChipList targets={paymentObject.counterparty_aliases} accounts={accounts} />;
     } else {
+        // @ts-ignore
         targetComponents = <TargetChip target={paymentObject.counterparty_alias} accounts={accounts} />;
     }
 
diff --git a/src/pages/PendingPayments/PendingPayments.tsx b/src/pages/PendingPayments/PendingPayments.tsx
index 2fc68a13..ea816369 100644
--- a/src/pages/PendingPayments/PendingPayments.tsx
+++ b/src/pages/PendingPayments/PendingPayments.tsx
@@ -73,9 +73,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class PendingPayments extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/Profile/BillingInfo.tsx b/src/pages/Profile/BillingInfo.tsx
index 00aba31c..46143545 100644
--- a/src/pages/Profile/BillingInfo.tsx
+++ b/src/pages/Profile/BillingInfo.tsx
@@ -17,7 +17,17 @@ const styles = {
     }
 };
 
-class BillingInfo extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class BillingInfo extends React.Component<IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
diff --git a/src/pages/Profile/BusinessInfo.tsx b/src/pages/Profile/BusinessInfo.tsx
index cee93cfa..3acb3c9b 100644
--- a/src/pages/Profile/BusinessInfo.tsx
+++ b/src/pages/Profile/BusinessInfo.tsx
@@ -76,6 +76,7 @@ const BusinessInfo = ({ t, userType, totalBalance, ...props }) => {
 
                 <Grid item xs={12}>
                     <TextField
+                        // @ts-ignore
                         min={0}
                         step={0.01}
                         type="number"
diff --git a/src/pages/Profile/NotificationFilters.tsx b/src/pages/Profile/NotificationFilters.tsx
index 25b8ac8a..930f8510 100644
--- a/src/pages/Profile/NotificationFilters.tsx
+++ b/src/pages/Profile/NotificationFilters.tsx
@@ -41,7 +41,17 @@ const styles = {
     }
 };
 
-class NotificationFilters extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class NotificationFilters extends React.Component<IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {
diff --git a/src/pages/Profile/Profile.tsx b/src/pages/Profile/Profile.tsx
index 639a084c..b95f770a 100644
--- a/src/pages/Profile/Profile.tsx
+++ b/src/pages/Profile/Profile.tsx
@@ -70,6 +70,7 @@ const styles: any = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
diff --git a/src/pages/RequestInquiry/ConfirmationDialog.tsx b/src/pages/RequestInquiry/ConfirmationDialog.tsx
index 73cbdb69..ace678b6 100644
--- a/src/pages/RequestInquiry/ConfirmationDialog.tsx
+++ b/src/pages/RequestInquiry/ConfirmationDialog.tsx
@@ -10,7 +10,17 @@ import DialogContent from "@material-ui/core/DialogContent";
 import DialogTitle from "@material-ui/core/DialogTitle";
 import { formatMoney } from "~functions/Utils";
 
-export default class ConfirmationDialog extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+export default class ConfirmationDialog extends React.Component<IProps> {
+    state: IState;
+
     render() {
         const {
             confirmModalOpen,
@@ -55,6 +65,7 @@ export default class ConfirmationDialog extends React.Component {
         });
 
         return (
+            // @ts-ignore
             <Dialog open={confirmModalOpen} keepMounted onClose={this.closeModal}>
                 <DialogTitle>Confirm the request</DialogTitle>
                 <DialogContent>
diff --git a/src/pages/RequestInquiry/Options/AllowBunqMe.tsx b/src/pages/RequestInquiry/Options/AllowBunqMe.tsx
index c4962de6..46c6471d 100644
--- a/src/pages/RequestInquiry/Options/AllowBunqMe.tsx
+++ b/src/pages/RequestInquiry/Options/AllowBunqMe.tsx
@@ -2,7 +2,17 @@ import React from "react";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Switch from "@material-ui/core/Switch";
 
-class AllowBunqMe extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class AllowBunqMe extends React.Component<IProps> {
+    state: IState;
+
     render() {
         const { targetType, allowBunqMe, handleToggle, t } = this.props;
 
diff --git a/src/pages/RequestInquiry/Options/MinimumAge.tsx b/src/pages/RequestInquiry/Options/MinimumAge.tsx
index befd873e..682a94d2 100644
--- a/src/pages/RequestInquiry/Options/MinimumAge.tsx
+++ b/src/pages/RequestInquiry/Options/MinimumAge.tsx
@@ -19,7 +19,15 @@ const styles = theme => ({
     }
 });
 
-class MinimumAge extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class MinimumAge extends React.Component<IProps> {
     render() {
         const {
             classes,
diff --git a/src/pages/RequestInquiry/RequestInquiry.tsx b/src/pages/RequestInquiry/RequestInquiry.tsx
index 893aa22f..8ce0350a 100644
--- a/src/pages/RequestInquiry/RequestInquiry.tsx
+++ b/src/pages/RequestInquiry/RequestInquiry.tsx
@@ -52,9 +52,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class RequestInquiry extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/RequestInquiry/SplitAmountForm.tsx b/src/pages/RequestInquiry/SplitAmountForm.tsx
index be7bfc13..26693335 100644
--- a/src/pages/RequestInquiry/SplitAmountForm.tsx
+++ b/src/pages/RequestInquiry/SplitAmountForm.tsx
@@ -23,7 +23,17 @@ const styles = {
     titleGrid: { display: "flex", alignItems: "center" }
 };
 
-class SplitAmountForm extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class SplitAmountForm extends React.Component<IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {};
@@ -40,6 +50,7 @@ class SplitAmountForm extends React.Component {
         const splitAmountItems = targets.map(target => {
             return (
                 <SplitAmountItem
+                    // @ts-ignore
                     target={target}
                     amount={amount}
                     totalSplit={totalSplit}
@@ -50,6 +61,7 @@ class SplitAmountForm extends React.Component {
         });
 
         return (
+            // @ts-ignore
             <Paper style={styles.paper}>
                 <Grid container spacing={8}>
                     <Grid item xs={12} style={styles.titleGrid}>
@@ -63,6 +75,7 @@ class SplitAmountForm extends React.Component {
                             <Table style={styles.table}>
                                 <TableBody>
                                     <SplitAmountItem
+                                        // @ts-ignore
                                         account={account}
                                         amount={amount}
                                         totalSplit={totalSplit}
diff --git a/src/pages/RequestInquiry/SplitAmountItem.tsx b/src/pages/RequestInquiry/SplitAmountItem.tsx
index 8602cfda..001ae5f4 100644
--- a/src/pages/RequestInquiry/SplitAmountItem.tsx
+++ b/src/pages/RequestInquiry/SplitAmountItem.tsx
@@ -36,7 +36,17 @@ const styles = {
     }
 };
 
-class SplitAmountItem extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class SplitAmountItem extends React.Component<IProps> {
+    state: IState;
+
     constructor(props, context) {
         super(props, context);
         this.state = {};
diff --git a/src/pages/RequestInquiryInfo.tsx b/src/pages/RequestInquiryInfo.tsx
index 379f4b65..7fa2d12f 100644
--- a/src/pages/RequestInquiryInfo.tsx
+++ b/src/pages/RequestInquiryInfo.tsx
@@ -56,9 +56,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class RequestInquiryInfo extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/RequestResponseInfo/RequestResponseInfo.tsx b/src/pages/RequestResponseInfo/RequestResponseInfo.tsx
index 83038ac6..82c97dc2 100644
--- a/src/pages/RequestResponseInfo/RequestResponseInfo.tsx
+++ b/src/pages/RequestResponseInfo/RequestResponseInfo.tsx
@@ -16,7 +16,6 @@ import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import HelpIcon from "@material-ui/icons/Help";
 import SaveIcon from "@material-ui/icons/Save";
 import FilterIcon from "@material-ui/icons/FilterList";
-import { shareInviteMonetaryAccountInquiryChangeStatus } from "~actions/share_invite_monetary_account_inquiry";
 
 import FilterCreationDialog from "~components/FilterCreationDialog";
 import AccountSelectorDialog from "~components/FormFields/AccountSelectorDialog";
@@ -56,9 +55,11 @@ const styles: any = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class RequestResponseInfo extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -218,7 +219,7 @@ class RequestResponseInfo extends React.Component<ReturnType<typeof mapStateToPr
             content = (
                 <>
                     <Paper style={styles.paper}>
-                        <Grid container spacing={24} align={"center"} justify={"center"}>
+                        <Grid container spacing={24} alignContent={"center"} justify={"center"}>
                             <TransactionHeader
                                 to={requestResponse.alias}
                                 from={requestResponse.counterparty_alias}
@@ -353,7 +354,7 @@ class RequestResponseInfo extends React.Component<ReturnType<typeof mapStateToPr
                             </Paper>
                         ) : (
                             <Paper style={styles.paper}>
-                                <Grid container spacing={24} align={"center"} justify={"center"}>
+                                <Grid container spacing={24} alignContent={"center"} justify={"center"}>
                                     <Grid item xs={12}>
                                         <AccountSelectorDialog
                                             value={this.state.selectedAccount}
@@ -441,6 +442,7 @@ class RequestResponseInfo extends React.Component<ReturnType<typeof mapStateToPr
 const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
+        // @ts-ignore
         limitedPermissions: state.user.limited_permissions,
 
         pdfSaveModeEnabled: state.application.pdf_save_mode_enabled,
diff --git a/src/pages/RuleDashboard/RuleCollectionItem.tsx b/src/pages/RuleDashboard/RuleCollectionItem.tsx
index 29ba65dc..7e65fa5b 100644
--- a/src/pages/RuleDashboard/RuleCollectionItem.tsx
+++ b/src/pages/RuleDashboard/RuleCollectionItem.tsx
@@ -10,11 +10,13 @@ import CategoryIcon from "~components/Categories/CategoryIcon";
 import RuleCollection from "~models/RuleCollection";
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
     ruleCollection: RuleCollection;
     t: AppWindow["t"];
+    [key: string]: any;
 }
 
 class RuleCollectionItem extends React.Component<IProps> {
@@ -45,6 +47,7 @@ class RuleCollectionItem extends React.Component<IProps> {
         const secondaryText = `${t(enabledText)} - ${ruleCollection.getRules().length} ${t("rules")}`;
 
         return [
+            // @ts-ignore
             <ListItem button component={NavLink} to={`/rule-page/${ruleCollection.id}`}>
                 <ListItemText primary={ruleCollection.getTitle()} secondary={secondaryText} />
                 <ListItemSecondaryAction>{categoryIcons}</ListItemSecondaryAction>
diff --git a/src/pages/RuleDashboard/RuleDashboard.tsx b/src/pages/RuleDashboard/RuleDashboard.tsx
index 9fb3daa8..59bb6dd7 100644
--- a/src/pages/RuleDashboard/RuleDashboard.tsx
+++ b/src/pages/RuleDashboard/RuleDashboard.tsx
@@ -38,6 +38,7 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
@@ -148,6 +149,7 @@ class RuleDashboard extends React.Component<ReturnType<typeof mapStateToProps> &
                                 <Button
                                     variant="contained"
                                     color="primary"
+                                    // @ts-ignore
                                     component={NavLink}
                                     to={`/rule-page/null`}
                                     style={styles.button}
@@ -161,6 +163,7 @@ class RuleDashboard extends React.Component<ReturnType<typeof mapStateToProps> &
                                 <Button
                                     variant="contained"
                                     color="primary"
+                                    // @ts-ignore
                                     component={NavLink}
                                     to="/category-dashboard"
                                     style={styles.button}
diff --git a/src/pages/RulePage/RuleCollectionPreview.tsx b/src/pages/RulePage/RuleCollectionPreview.tsx
index abe2ae1f..0ca4f7f7 100644
--- a/src/pages/RulePage/RuleCollectionPreview.tsx
+++ b/src/pages/RulePage/RuleCollectionPreview.tsx
@@ -7,7 +7,8 @@ import FormControlLabel from "@material-ui/core/FormControlLabel";
 import List from "@material-ui/core/List";
 const Paper: any = PaperWrapper;
 
-import RuleCollection, { EventObjectResult } from "~types/RuleCollection";
+import RuleCollection from "~models/RuleCollection";
+import { EventObjectResult } from "~types/RuleCollection";
 import RuleCollectionPreviewItem from "./RuleCollectionPreviewItem";
 
 // import typed worker
diff --git a/src/pages/RulePage/RuleCreator.tsx b/src/pages/RulePage/RuleCreator.tsx
index 3bfd4b5c..2eb8e588 100644
--- a/src/pages/RulePage/RuleCreator.tsx
+++ b/src/pages/RulePage/RuleCreator.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { translate } from "react-i18next";
-import Redirect from "react-router-dom/Redirect";
+import { Redirect } from "react-router-dom";
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
 import Select from "@material-ui/core/Select";
@@ -35,7 +35,8 @@ import ItemTypeRuleItem from "./RuleTypeItems/ItemTypeRuleItem";
 
 import Rule from "~types/Rules/Rule";
 import { RuleTypes } from "~types/Types";
-import { default as RuleCollection, RuleCollectionMatchType } from "~types/RuleCollection";
+import { RuleCollectionMatchType } from "~types/RuleCollection";
+import RuleCollection from "~models/RuleCollection";
 
 const styles = {
     title: {
diff --git a/src/pages/RulePage/RulePage.tsx b/src/pages/RulePage/RulePage.tsx
index d08bc4cb..5539f97b 100644
--- a/src/pages/RulePage/RulePage.tsx
+++ b/src/pages/RulePage/RulePage.tsx
@@ -15,9 +15,11 @@ import { actions as categoryRulesActions } from "~store/categoryRules";
 import { actions as snackbarActions } from "~store/snackbar";
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class RulesPage extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/RulePage/RuleTypeItems/AccountRuleItem.tsx b/src/pages/RulePage/RuleTypeItems/AccountRuleItem.tsx
index 22b631d9..d7f908f3 100644
--- a/src/pages/RulePage/RuleTypeItems/AccountRuleItem.tsx
+++ b/src/pages/RulePage/RuleTypeItems/AccountRuleItem.tsx
@@ -13,8 +13,7 @@ import AccountSelectorDialog from "~components/FormFields/AccountSelectorDialog"
 import TranslateMenuItem2 from "~components/TranslationHelpers/MenuItem";
 const TranslateMenuItem: any = TranslateMenuItem2;
 
-interface IPropTypes {
-    BunqJSClient: any;
+interface IProps {
     rule: AccountRule;
     accounts: any[];
     removeRule: any;
@@ -37,8 +36,8 @@ const styles = {
     }
 };
 
-class AccountRuleItem extends React.Component<IPropTypes, any> {
-    constructor(props: IPropTypes, context: any) {
+class AccountRuleItem extends React.Component<IProps, any> {
+    constructor(props: IProps, context: any) {
         super(props, context);
         this.state = {
             rule: this.props.rule
diff --git a/src/pages/RulePage/RuleTypeItems/ItemTypeRuleItem.tsx b/src/pages/RulePage/RuleTypeItems/ItemTypeRuleItem.tsx
index 8336ca37..8a5e5f06 100644
--- a/src/pages/RulePage/RuleTypeItems/ItemTypeRuleItem.tsx
+++ b/src/pages/RulePage/RuleTypeItems/ItemTypeRuleItem.tsx
@@ -14,7 +14,7 @@ import TranslateMenuItem2 from "~components/TranslationHelpers/MenuItem";
 const TranslateTypography: any = TranslateTypography2;
 const TranslateMenuItem: any = TranslateMenuItem2;
 
-interface IPropTypes {
+interface IProps {
     rule: TypeRule;
     removeRule: any;
     updateRule: any;
@@ -36,8 +36,8 @@ const styles = {
     }
 };
 
-class ItemTypeRuleItem extends React.Component<IPropTypes, any> {
-    constructor(props: IPropTypes, context: any) {
+class ItemTypeRuleItem extends React.Component<IProps, any> {
+    constructor(props: IProps, context: any) {
         super(props, context);
         this.state = {
             rule: this.props.rule
diff --git a/src/pages/RulePage/RuleTypeItems/TransactionAmountRuleItem.tsx b/src/pages/RulePage/RuleTypeItems/TransactionAmountRuleItem.tsx
index c64a55e9..709f4c90 100644
--- a/src/pages/RulePage/RuleTypeItems/TransactionAmountRuleItem.tsx
+++ b/src/pages/RulePage/RuleTypeItems/TransactionAmountRuleItem.tsx
@@ -15,7 +15,7 @@ import TranslateMenuItem2 from "~components/TranslationHelpers/MenuItem";
 const TranslateTypography: any = TranslateTypography2;
 const TranslateMenuItem: any = TranslateMenuItem2;
 
-interface IPropTypes {
+interface IProps {
     rule: TransactionAmountRule;
     removeRule: any;
     updateRule: any;
@@ -37,8 +37,8 @@ const styles = {
     }
 };
 
-class TransactionAmountRuleItem extends React.Component<IPropTypes, any> {
-    constructor(props: IPropTypes, context: any) {
+class TransactionAmountRuleItem extends React.Component<IProps, any> {
+    constructor(props: IProps, context: any) {
         super(props, context);
         this.state = {
             rule: this.props.rule
diff --git a/src/pages/RulePage/RuleTypeItems/ValueRuleItem.tsx b/src/pages/RulePage/RuleTypeItems/ValueRuleItem.tsx
index 235b579f..af9c3640 100644
--- a/src/pages/RulePage/RuleTypeItems/ValueRuleItem.tsx
+++ b/src/pages/RulePage/RuleTypeItems/ValueRuleItem.tsx
@@ -13,7 +13,7 @@ const RuleItemMenu: any = RuleItemMenu2;
 import TranslateMenuItem2 from "~components/TranslationHelpers/MenuItem";
 const TranslateMenuItem: any = TranslateMenuItem2;
 
-interface IPropTypes {
+interface IProps {
     rule: ValueRule;
     removeRule: any;
     updateRule: any;
@@ -35,8 +35,8 @@ const styles = {
     }
 };
 
-class ValueRuleItem extends React.Component<IPropTypes, any> {
-    constructor(props: IPropTypes, context: any) {
+class ValueRuleItem extends React.Component<IProps, any> {
+    constructor(props: IProps, context: any) {
         super(props, context);
         this.state = {
             rule: this.props.rule,
diff --git a/src/pages/SavingsGoalPage/SavingsGoalPage.tsx b/src/pages/SavingsGoalPage/SavingsGoalPage.tsx
index 6d3aa7c9..efc0532e 100644
--- a/src/pages/SavingsGoalPage/SavingsGoalPage.tsx
+++ b/src/pages/SavingsGoalPage/SavingsGoalPage.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React, { CSSProperties } from "react";
 import { connect } from "react-redux";
 import { translate } from "react-i18next";
 import { getFormValues } from "redux-form";
@@ -38,13 +37,19 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    reduxState: ReduxState;
+    [key: string]: any;
 }
 
 class SavingsGoalPage extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
     state: IState;
+    closeImportDialog: Function;
+    importData: Function;
+    closeExportDialog: Function;
 
     constructor(props, context) {
         super(props, context);
@@ -54,12 +59,8 @@ class SavingsGoalPage extends React.Component<ReturnType<typeof mapStateToProps>
         };
     }
 
-    static contextTypes = {
-        store: PropTypes.object
-    };
-
     get formValues() {
-        return getFormValues("savingsGoal")(this.context.store.getState());
+        return getFormValues("savingsGoal")(this.props.reduxState);
     }
 
     saveSavingsGoal = data => {
@@ -131,7 +132,7 @@ class SavingsGoalPage extends React.Component<ReturnType<typeof mapStateToProps>
                     <Paper style={styles.paper}>
                         <Grid container spacing={16}>
                             <Grid item style={{ flexGrow: 1 }}>
-                                <Typography variant="h6" style={styles.subTitle}>
+                                <Typography variant="h6">
                                     {t("Savings goal")}
                                 </Typography>
                             </Grid>
@@ -180,12 +181,14 @@ class SavingsGoalPage extends React.Component<ReturnType<typeof mapStateToProps>
 
 const mapStateToProps = (state: ReduxState) => {
     return {
+        reduxState: state,
         savingsGoals: state.savings_goals.savings_goals,
 
         accounts: state.accounts.accounts,
         shareInviteMonetaryAccountResponses:
             state.share_invite_monetary_account_responses.share_invite_monetary_account_responses,
 
+        // @ts-ignore
         form: state.form.savingsGoal
     };
 };
diff --git a/src/pages/SavingsGoalPage/renderAmountFieldCustom.tsx b/src/pages/SavingsGoalPage/renderAmountFieldCustom.tsx
index 205c6551..311cca0e 100644
--- a/src/pages/SavingsGoalPage/renderAmountFieldCustom.tsx
+++ b/src/pages/SavingsGoalPage/renderAmountFieldCustom.tsx
@@ -39,6 +39,7 @@ const handleChangeFormatted = onChange => valueObject => {
 };
 
 interface IProps {
+    [key: string]: any;
 }
 
 const renderTextField = ({
diff --git a/src/pages/SavingsGoals/SavingsGoals.tsx b/src/pages/SavingsGoals/SavingsGoals.tsx
index d0e218f2..6e911de1 100644
--- a/src/pages/SavingsGoals/SavingsGoals.tsx
+++ b/src/pages/SavingsGoals/SavingsGoals.tsx
@@ -35,9 +35,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class SavingsGoals extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/ScheduledPayments/ScheduledPaymentItem.tsx b/src/pages/ScheduledPayments/ScheduledPaymentItem.tsx
index ccc79464..e08dd74a 100644
--- a/src/pages/ScheduledPayments/ScheduledPaymentItem.tsx
+++ b/src/pages/ScheduledPayments/ScheduledPaymentItem.tsx
@@ -28,7 +28,15 @@ const styles = {
     }
 };
 
-class ScheduledPaymentItem extends React.Component {
+interface IState {
+    [key: string]: any;
+}
+
+interface IProps {
+    [key: string]: any;
+}
+
+class ScheduledPaymentItem extends React.Component<IProps> {
     constructor(props, context) {
         super(props, context);
         this.state = {};
diff --git a/src/pages/ScheduledPayments/ScheduledPayments.tsx b/src/pages/ScheduledPayments/ScheduledPayments.tsx
index dbcdba60..faa06000 100644
--- a/src/pages/ScheduledPayments/ScheduledPayments.tsx
+++ b/src/pages/ScheduledPayments/ScheduledPayments.tsx
@@ -38,9 +38,11 @@ const styles: any = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class ScheduledPayments extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/ScheduledPayments/ScheduledPaymentsEditDialog.tsx b/src/pages/ScheduledPayments/ScheduledPaymentsEditDialog.tsx
index 93b676b1..15f059d5 100644
--- a/src/pages/ScheduledPayments/ScheduledPaymentsEditDialog.tsx
+++ b/src/pages/ScheduledPayments/ScheduledPaymentsEditDialog.tsx
@@ -33,9 +33,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class ScheduledPaymentsEditDialog extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
@@ -86,6 +88,7 @@ class ScheduledPaymentsEditDialog extends React.Component<ReturnType<typeof mapS
             {
                 [name]: event.target.value
             },
+            // @ts-ignore
             this.validateForm
         );
     };
@@ -97,6 +100,7 @@ class ScheduledPaymentsEditDialog extends React.Component<ReturnType<typeof mapS
             {
                 amount: amount
             },
+            // @ts-ignore
             this.validateForm
         );
     };
@@ -105,6 +109,7 @@ class ScheduledPaymentsEditDialog extends React.Component<ReturnType<typeof mapS
             {
                 [name]: value
             },
+            // @ts-ignore
             this.validateForm
         );
     };
@@ -142,6 +147,7 @@ class ScheduledPaymentsEditDialog extends React.Component<ReturnType<typeof mapS
             time_start: format(scheduleStartDate, "yyyy-MM-dd HH:mm:ss")
         };
         if (scheduleEndDate) {
+            // @ts-ignore
             scheduleInfo.time_end = format(scheduleEndDate, "yyyy-MM-dd HH:mm:ss");
         }
 
@@ -152,6 +158,7 @@ class ScheduledPaymentsEditDialog extends React.Component<ReturnType<typeof mapS
             paymentInfo,
             scheduleInfo
         );
+        // @ts-ignore
         this.closeDialog();
     };
 
@@ -251,6 +258,7 @@ class ScheduledPaymentsEditDialog extends React.Component<ReturnType<typeof mapS
 const mapStateToProps = (state: ReduxState) => {
     return {
         user: state.user.user,
+        // @ts-ignore
         limitedPermissions: state.user.limited_permissions,
 
         scheduledPaymentsLoading: state.scheduled_payments.loading,
diff --git a/src/pages/Settings/EditPasswordForm.tsx b/src/pages/Settings/EditPasswordForm.tsx
index fa15f6e6..ceb20bad 100644
--- a/src/pages/Settings/EditPasswordForm.tsx
+++ b/src/pages/Settings/EditPasswordForm.tsx
@@ -21,9 +21,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class EditPasswordForm extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/Settings/Settings.tsx b/src/pages/Settings/Settings.tsx
index 4c5f533a..516b1d20 100644
--- a/src/pages/Settings/Settings.tsx
+++ b/src/pages/Settings/Settings.tsx
@@ -10,7 +10,6 @@ import MenuItem from "@material-ui/core/MenuItem";
 import FormControl from "@material-ui/core/FormControl";
 import FormControlLabel from "@material-ui/core/FormControlLabel";
 import Select from "@material-ui/core/Select";
-import TextField from "@material-ui/core/TextField";
 import Paper from "@material-ui/core/Paper";
 import Switch from "@material-ui/core/Switch";
 import DialogActions from "@material-ui/core/DialogActions";
@@ -103,9 +102,11 @@ const humanReadableThemes = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class Settings extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/Stats/Stats.tsx b/src/pages/Stats/Stats.tsx
index 4b576e42..a76dd699 100644
--- a/src/pages/Stats/Stats.tsx
+++ b/src/pages/Stats/Stats.tsx
@@ -33,9 +33,11 @@ const styles: any = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class Stats extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/pages/SwitchApiKeys.tsx b/src/pages/SwitchApiKeys.tsx
index b8804b99..705df155 100644
--- a/src/pages/SwitchApiKeys.tsx
+++ b/src/pages/SwitchApiKeys.tsx
@@ -38,9 +38,11 @@ const styles = {
 };
 
 interface IState {
+    [key: string]: any;
 }
 
 interface IProps {
+    [key: string]: any;
 }
 
 class SwitchApiKeys extends React.Component<ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps> & IProps> {
diff --git a/src/store/accountIdFilter/index.ts b/src/store/accountIdFilter/index.ts
index 9b291bd8..f2471d64 100644
--- a/src/store/accountIdFilter/index.ts
+++ b/src/store/accountIdFilter/index.ts
@@ -5,7 +5,7 @@ const removeAction = createAction("remove");
 const toggleAction = createAction("toggle");
 const clearAction = createAction("clear");
 
-export interface IAccountIdFilterState {
+interface IAccountIdFilterState {
     selectedAccountIds: Array<number>;
     toggle: boolean;
 }
diff --git a/src/store/accounts/thunks.ts b/src/store/accounts/thunks.ts
index bf25f0b4..bed2b56f 100644
--- a/src/store/accounts/thunks.ts
+++ b/src/store/accounts/thunks.ts
@@ -72,15 +72,16 @@ export function createAccount(
                     savingsGoal
                 );
                 break;
-            case "MonetaryAccountJoint":
-                apiPromise = BunqJSClient.api.monetaryAccountJoint.post(
-                    userId,
-                    currency,
-                    description,
-                    dailyLimit,
-                    color
-                );
-                break;
+            // TODO: figure out if this still exists
+            // case "MonetaryAccountJoint":
+            //     apiPromise = BunqJSClient.api.monetaryAccountJoint.post(
+            //         userId,
+            //         currency,
+            //         description,
+            //         dailyLimit,
+            //         color
+            //     );
+            //     break;
             case "MonetaryAccountBank":
             default:
                 apiPromise = BunqJSClient.api.monetaryAccountBank.post(
diff --git a/src/store/bunqMeTabs/thunks.ts b/src/store/bunqMeTabs/thunks.ts
index 023d608d..96d47e0f 100644
--- a/src/store/bunqMeTabs/thunks.ts
+++ b/src/store/bunqMeTabs/thunks.ts
@@ -1,6 +1,5 @@
 import { AppWindow } from "~app";
 import { STORED_BUNQ_ME_TABS } from "~misc/consts";
-import BunqDesktopClient from "~components/BunqDesktopClient";
 import BunqErrorHandler from "~functions/BunqErrorHandler";
 import BunqMeTab from "~models/BunqMeTab";
 import { actions } from "./index";
@@ -43,7 +42,7 @@ export function bunqMeTabsUpdate(
 
         const batchedActions = [];
         try {
-            const bunqMeTabs = await BunqJSClient.api.bunqMeTabs.list(user_id, accountId, options);
+            const bunqMeTabs = await BunqJSClient.api.bunqMeTabs.list(user_id, accountId, options as any);
             const bunqMeTabsNew = bunqMeTabs.map(item => new BunqMeTab(item));
             batchedActions.push(actions.setInfo({
                 bunqMeTabs: bunqMeTabsNew,
diff --git a/tests/src/react/App.test.jsx b/tests/src/react/App.test.tsx
similarity index 93%
rename from tests/src/react/App.test.jsx
rename to tests/src/react/App.test.tsx
index e1f52a09..bd2cf6ed 100644
--- a/tests/src/react/App.test.jsx
+++ b/tests/src/react/App.test.tsx
@@ -12,7 +12,7 @@ describe("<App />", () => {
         // configure a react16 adapter
         enzyme.configure({ adapter: new Adapter() });
 
-        // allow shallwo renderer
+        // allow shallow renderer
         shallow = createShallow();
     });
 
diff --git a/tsconfig.json b/tsconfig.json
index b9915dc2..c482a991 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -43,6 +43,7 @@
         }
     },
     "exclude": [
+        "node_modules",
         "**/*.test.ts"
     ],
     "jest": {
diff --git a/yarn.lock b/yarn.lock
index 59c23df8..97f6fd5c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -964,7 +964,7 @@
     "@babel/plugin-transform-react-jsx-self" "^7.8.3"
     "@babel/plugin-transform-react-jsx-source" "^7.8.3"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.6.3":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.6.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.3.tgz#0811944f73a6c926bb2ad35e918dcc1bfab279f1"
   integrity sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w==
@@ -1433,6 +1433,11 @@
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
   integrity sha512-Q1y515GcOdTHgagaVFhHnIFQ38ygs/kmxdNpvpou+raI9UO3YZcHDngBSYKQklcKlvA7iuQlmIKbzvmxcOE9CQ==
 
+"@types/history@*":
+  version "4.7.4"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.4.tgz#06cbceb0ace6a342a9aafcb655a688cf38f6150d"
+  integrity sha512-+o2igcuZA3xtOoFH56s+MCZVidwlJNcJID57DSCyawS2i910yG9vkwehCjJNZ6ImhCR5S9DbvIJKyYHcMyOfMw==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
@@ -1502,6 +1507,23 @@
   dependencies:
     react-i18next "*"
 
+"@types/react-router-dom@^5.1.3":
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.3.tgz#b5d28e7850bd274d944c0fbbe5d57e6b30d71196"
+  integrity sha512-pCq7AkOvjE65jkGS5fQwQhvUp4+4PVD9g39gXLZViP2UqFiFzsEpB3PKf0O6mdbKsewSK8N14/eegisa/0CwnA==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*", "@types/react-router@^5.1.4":
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.4.tgz#7d70bd905543cb6bcbdcc6bd98902332054f31a6"
+  integrity sha512-PZtnBuyfL07sqCJvGg3z+0+kt6fobc/xmle08jBiezLS8FrmGeiGkJnuxL/8Zgy9L83ypUhniV5atZn/L8n9MQ==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+
 "@types/react-transition-group@^2.0.8":
   version "2.9.2"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-2.9.2.tgz#c48cf2a11977c8b4ff539a1c91d259eaa627028d"
@@ -5603,6 +5625,11 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
+
 gulp-batch@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/gulp-batch/-/gulp-batch-1.0.5.tgz#c40fc9b2303674897b1216d82e1518b73217da59"
@@ -5858,7 +5885,7 @@ he@1.2.x:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-history@^4.7.2:
+history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
   integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
@@ -5879,12 +5906,12 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0, hoist-non-react-statics@^2.5.4:
+hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.4:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
-hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.2.1, hoist-non-react-statics@^3.3.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#101685d3aff3b23ea213163f6e8e12f4f111e19f"
   integrity sha512-wbg3bpgA/ZqWrZuMOeJi8+SKMhr7X9TesL/rXMjTzh0p0JUBo3II8DHboYbuIXWRlttrUFxwcu/5kygrCw8fJw==
@@ -7999,6 +8026,15 @@ mimic-response@^1.0.0, mimic-response@^1.0.1:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
   integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
 
+mini-create-react-context@^0.3.0:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz#79fc598f283dd623da8e088b05db8cddab250189"
+  integrity sha512-2v+OeetEyliMt5VHMXsBhABoJ0/M4RCe7fatd/fBy6SMiKazUSEt3gxxypfnk2SHMkdBYvorHRoQxuGoiwbzAw==
+  dependencies:
+    "@babel/runtime" "^7.4.0"
+    gud "^1.0.0"
+    tiny-warning "^1.0.2"
+
 mini-css-extract-plugin@^0.4.0:
   version "0.4.5"
   resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.4.5.tgz#c99e9e78d54f3fa775633aee5933aeaa4e80719a"
@@ -9881,30 +9917,34 @@ react-redux@^5.0.7:
     react-is "^16.6.0"
     react-lifecycles-compat "^3.0.0"
 
-react-router-dom@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
-  integrity sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==
+react-router-dom@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.1.2.tgz#06701b834352f44d37fbb6311f870f84c76b9c18"
+  integrity sha512-7BPHAaIwWpZS074UKaw1FjVdZBSVWEk8IuDXdB+OkLb8vd/WRQIpA4ag9WQk61aEfQs47wHyjWUoUGGZxpQXew==
   dependencies:
-    history "^4.7.2"
-    invariant "^2.2.4"
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
     loose-envify "^1.3.1"
-    prop-types "^15.6.1"
-    react-router "^4.3.1"
-    warning "^4.0.1"
+    prop-types "^15.6.2"
+    react-router "5.1.2"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
 
-react-router@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"
-  integrity sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==
+react-router@5.1.2, react-router@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.1.2.tgz#6ea51d789cb36a6be1ba5f7c0d48dd9e817d3418"
+  integrity sha512-yjEuMFy1ONK246B+rsa0cUam5OeAQ8pyclRDgpxuSCrAlJ1qN9uZ5IgyKC7gQg0w8OM50NXHEegPh/ks9YuR2A==
   dependencies:
-    history "^4.7.2"
-    hoist-non-react-statics "^2.5.0"
-    invariant "^2.2.4"
+    "@babel/runtime" "^7.1.2"
+    history "^4.9.0"
+    hoist-non-react-statics "^3.1.0"
     loose-envify "^1.3.1"
+    mini-create-react-context "^0.3.0"
     path-to-regexp "^1.7.0"
-    prop-types "^15.6.1"
-    warning "^4.0.1"
+    prop-types "^15.6.2"
+    react-is "^16.6.0"
+    tiny-invariant "^1.0.2"
+    tiny-warning "^1.0.0"
 
 react-side-effect@^1.1.0:
   version "1.2.0"
@@ -11640,7 +11680,7 @@ tiny-invariant@^1.0.2:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73"
   integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==
 
-tiny-warning@^1.0.0:
+tiny-warning@^1.0.0, tiny-warning@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -11904,7 +11944,7 @@ typescript-tuple@^2.2.1:
   dependencies:
     typescript-compare "^0.0.2"
 
-typescript@^3.0.1:
+typescript@^3.7.5:
   version "3.7.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.7.5.tgz#0692e21f65fd4108b9330238aac11dd2e177a1ae"
   integrity sha512-/P5lkRXkWHNAbcJIiHPfRoKqyd7bsyCma1hZNUGfn20qm64T6ZBlrzprymeu918H+mB/0rIg2gGK/BXkhhYgBw==

From 68f53c115f62e008b145d95f0a88baa0861c3a83 Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Tue, 21 Jan 2020 22:49:55 +0100
Subject: [PATCH 23/26] chore: ts-ignore Disclaimer.tsx

---
 src/pages/Disclaimer.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/Disclaimer.tsx b/src/pages/Disclaimer.tsx
index 01652b17..f02f61bd 100644
--- a/src/pages/Disclaimer.tsx
+++ b/src/pages/Disclaimer.tsx
@@ -133,6 +133,7 @@ class Disclaimer extends React.Component<ReturnType<typeof mapStateToProps> & Re
 
 const mapStateToProps = (state: ReduxState) => {
     return {
+        // @ts-ignore
         analyticsEnabled: state.options.analytics_enabled
     };
 };

From c23bc3ea2562fd9f20ba7565f0da5fce9a85b3ba Mon Sep 17 00:00:00 2001
From: Gregory Goijaerts <crecketgaming@gmail.com>
Date: Tue, 21 Jan 2020 18:08:20 +0100
Subject: [PATCH 24/26] Add switch case for green card types

---
 .../FilterComponents/CardSelection.tsx        |  4 +--
 src/pages/Cards/CardListItem.tsx              | 26 ++++++++++++++-----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/FilterComponents/CardSelection.tsx b/src/components/FilterComponents/CardSelection.tsx
index 0e325134..67ed0088 100644
--- a/src/components/FilterComponents/CardSelection.tsx
+++ b/src/components/FilterComponents/CardSelection.tsx
@@ -99,7 +99,7 @@ class CardSelection extends React.Component<ReturnType<typeof mapStateToProps> &
             // ensure card exists
             if (!card) return null;
             card = card;
-            const { cardImage, cardType } = getCardTypeImage(card.type, card.cardType);
+            const { cardImage, cardType } = getCardTypeImage(card);
 
             // display big chip or smaller icon
             return (
@@ -132,7 +132,7 @@ class CardSelection extends React.Component<ReturnType<typeof mapStateToProps> &
                 }
 
                 const cardDescription = getCardDescription(card);
-                const { cardImage, cardType } = getCardTypeImage(card.type, card.cardType);
+                const { cardImage, cardType } = getCardTypeImage(card);
 
                 return (
                     <MenuItem key={key} onClick={this.addCardId(card.id)}>
diff --git a/src/pages/Cards/CardListItem.tsx b/src/pages/Cards/CardListItem.tsx
index 88584ef9..89b345fe 100644
--- a/src/pages/Cards/CardListItem.tsx
+++ b/src/pages/Cards/CardListItem.tsx
@@ -10,15 +10,29 @@ const styles = {
     cardImage: {}
 };
 
-export const getCardTypeImage = (type, apiType = "CardDebit") => {
+export const getCardTypeImage = (card) => {
+    const type = card.type;
+    const productType = card.product_type;
+    let cardType = card.cardType;
+
     let cardImage = null;
-    let cardType = null;
     switch (type) {
         case "MASTERCARD": {
-            switch (apiType) {
+            // check the different physical mastercard types
+            switch (cardType) {
                 case "CardCredit":
-                    cardType = "MasterCard Credit";
-                    cardImage = "images/bunq-mastercard-credit.png";
+                    // check the different credit card types
+                    switch (productType) {
+                        case "MASTERCARD_GREEN":
+                            cardType = "MasterCard Green";
+                            cardImage = "images/bunq-mastercard-metal.png";
+                            break;
+                        default:
+                        case "MASTERCARD_TRAVEL":
+                            cardType = "MasterCard Credit";
+                            cardImage = "images/bunq-mastercard-credit.png";
+                            break;
+                    }
                     break;
                 default:
                 case "CardDebit":
@@ -56,7 +70,7 @@ class CardListItem extends React.Component<{ card: Card; onClick: any }> {
 
     render() {
         const card = this.props.card;
-        const { cardImage } = getCardTypeImage(card.type, card.cardType);
+        const { cardImage } = getCardTypeImage(card);
 
         return [
             <div className="single-card" style={styles.cardWrapper} onClick={this.props.onClick}>

From 3a96a857ab47f58860498d977f462cc3232e7a4f Mon Sep 17 00:00:00 2001
From: Gregory Goijaerts <crecketgaming@gmail.com>
Date: Tue, 21 Jan 2020 18:20:35 +0100
Subject: [PATCH 25/26] Increase node version of travis ci

---
 .travis.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index 26d5b045..2866b071 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -3,7 +3,7 @@ matrix:
   - os: osx
     osx_image: xcode9.4
     language: node_js
-    node_js: '10'
+    node_js: '12'
     env:
     - HOMEBREW_NO_AUTO_UPDATE=1
     - ELECTRON_CACHE=$HOME/.cache/electron
@@ -12,7 +12,7 @@ matrix:
     services: docker
     language: generic
     sudo: required
-    node_js: '10'
+    node_js: '12'
 
 addons:
   apt:

From 37aa77279dd55c7ed1be6ac11db3e329ad140c3d Mon Sep 17 00:00:00 2001
From: Michael Dekker <git@michaeldekker.nl>
Date: Wed, 22 Jan 2020 11:56:00 +0100
Subject: [PATCH 26/26] build: update React + Redux and other relevant
 dependencies

---
 package.json |  56 ++++++++++++------------
 yarn.lock    | 117 ++++++++++++++++++++++++---------------------------
 2 files changed, 83 insertions(+), 90 deletions(-)

diff --git a/package.json b/package.json
index e031343a..1f6981e2 100644
--- a/package.json
+++ b/package.json
@@ -145,30 +145,30 @@
         "upath": "1.0.5"
     },
     "devDependencies": {
-        "@babel/cli": "^7.7.7",
-        "@babel/core": "^7.7.7",
-        "@babel/plugin-proposal-class-properties": "^7.7.4",
-        "@babel/plugin-proposal-decorators": "^7.7.4",
-        "@babel/plugin-proposal-do-expressions": "^7.7.4",
-        "@babel/plugin-proposal-export-default-from": "^7.7.4",
-        "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
-        "@babel/plugin-proposal-function-bind": "^7.7.4",
-        "@babel/plugin-proposal-function-sent": "^7.7.4",
-        "@babel/plugin-proposal-json-strings": "^7.7.4",
-        "@babel/plugin-proposal-logical-assignment-operators": "^7.7.4",
+        "@babel/cli": "^7.8.3",
+        "@babel/core": "^7.8.3",
+        "@babel/plugin-proposal-class-properties": "^7.8.3",
+        "@babel/plugin-proposal-decorators": "^7.8.3",
+        "@babel/plugin-proposal-do-expressions": "^7.8.3",
+        "@babel/plugin-proposal-export-default-from": "^7.8.3",
+        "@babel/plugin-proposal-export-namespace-from": "^7.8.3",
+        "@babel/plugin-proposal-function-bind": "^7.8.3",
+        "@babel/plugin-proposal-function-sent": "^7.8.3",
+        "@babel/plugin-proposal-json-strings": "^7.8.3",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.8.3",
         "@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
-        "@babel/plugin-proposal-numeric-separator": "^7.7.4",
+        "@babel/plugin-proposal-numeric-separator": "^7.8.3",
         "@babel/plugin-proposal-optional-chaining": "^7.8.3",
-        "@babel/plugin-proposal-pipeline-operator": "^7.7.4",
-        "@babel/plugin-proposal-throw-expressions": "^7.7.4",
-        "@babel/plugin-syntax-dynamic-import": "^7.7.4",
-        "@babel/plugin-syntax-import-meta": "^7.7.4",
-        "@babel/plugin-transform-react-constant-elements": "^7.7.4",
-        "@babel/plugin-transform-react-inline-elements": "^7.7.4",
-        "@babel/plugin-transform-react-jsx-source": "^7.7.4",
-        "@babel/plugin-transform-runtime": "^7.7.4",
-        "@babel/preset-env": "^7.7.7",
-        "@babel/preset-react": "^7.7.4",
+        "@babel/plugin-proposal-pipeline-operator": "^7.8.3",
+        "@babel/plugin-proposal-throw-expressions": "^7.8.3",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+        "@babel/plugin-syntax-import-meta": "^7.8.3",
+        "@babel/plugin-transform-react-constant-elements": "^7.8.3",
+        "@babel/plugin-transform-react-inline-elements": "^7.8.3",
+        "@babel/plugin-transform-react-jsx-source": "^7.8.3",
+        "@babel/plugin-transform-runtime": "^7.8.3",
+        "@babel/preset-env": "^7.8.3",
+        "@babel/preset-react": "^7.8.3",
         "@bunq-community/bunq-js-client": "^1.0.3",
         "@bunq-community/bunqdesktop-templates": "^1.2.0",
         "@fortawesome/fontawesome-free": "^5.2.0",
@@ -212,7 +212,7 @@
         "gulp-watch": "^5.0.1",
         "hard-source-webpack-plugin": "^0.13.1",
         "html-webpack-plugin": "^3.2.0",
-        "iban": "^0.0.10",
+        "iban": "^0.0.12",
         "increase-memory-limit": "^1.0.6",
         "jest": "^24.9.0",
         "libphonenumber-js": "^1.6.4",
@@ -228,18 +228,18 @@
         "prettier": "^1.14.2",
         "prop-types": "^15.6.2",
         "qrcode.react": "^0.8.0",
-        "react": "^16.6.3",
+        "react": "^16.12.0",
         "react-chartjs-2": "^2.7.2",
         "react-color": "^2.14.1",
         "react-copy-to-clipboard": "^5.0.1",
-        "react-dom": "^16.4.1",
+        "react-dom": "^16.12.0",
         "react-helmet": "^5.2.0",
         "react-i18next": "^7.7.0",
         "react-json-view": "^1.17.1",
         "react-loadable": "^5.4.0",
         "react-map-gl": "^3.3.5",
         "react-number-format": "^4.0.7",
-        "react-redux": "^5.0.7",
+        "react-redux": "^7.1.3",
         "react-router": "^5.1.2",
         "react-router-dom": "^5.1.2",
         "react-spring": "^3.1.0",
@@ -247,8 +247,8 @@
         "react-test-renderer": "^16.3.1",
         "react-visibility-sensor": "^5.0.2",
         "react-windowed-list": "^2.0.0",
-        "redux": "^3.7.2",
-        "redux-form": "^7.4.2",
+        "redux": "^4.0.5",
+        "redux-form": "^8.2.6",
         "redux-mock-store": "^1.5.1",
         "redux-thunk": "^2.2.0",
         "rollup": "^0.45.2",
diff --git a/yarn.lock b/yarn.lock
index 97f6fd5c..9594f8e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,7 +12,7 @@
   resolved "https://registry.yarnpkg.com/7zip/-/7zip-0.0.6.tgz#9cafb171af82329490353b4816f03347aa150a30"
   integrity sha1-nK+xca+CMpSQNTtIFvAzR6oVCjA=
 
-"@babel/cli@^7.7.7":
+"@babel/cli@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.8.3.tgz#121beb7c273e0521eb2feeb3883a2b7435d12328"
   integrity sha512-K2UXPZCKMv7KwWy9Bl4sa6+jTNP7JyDiHKzoOiUUygaEDbC60vaargZDnO9oFMvlq8pIKOOyUUgeMYrsaN9djA==
@@ -44,7 +44,7 @@
     invariant "^2.2.4"
     semver "^5.5.0"
 
-"@babel/core@^7.1.0", "@babel/core@^7.7.7":
+"@babel/core@^7.1.0", "@babel/core@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.8.3.tgz#30b0ebb4dd1585de6923a0b4d179e0b9f5d82941"
   integrity sha512-4XFkf8AwyrEG7Ziu3L2L0Cv+WyY47Tcsp70JFmpftbAA1K7YL/sgE9jh9HyNj08Y/U50ItUchpN0w6HxAoX1rA==
@@ -301,7 +301,7 @@
     "@babel/helper-remap-async-to-generator" "^7.8.3"
     "@babel/plugin-syntax-async-generators" "^7.8.0"
 
-"@babel/plugin-proposal-class-properties@^7.7.4":
+"@babel/plugin-proposal-class-properties@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.3.tgz#5e06654af5cd04b608915aada9b2a6788004464e"
   integrity sha512-EqFhbo7IosdgPgZggHaNObkmO1kNUe3slaKu54d5OWvy+p9QIKOzK1GAEpAIsZtWVtPXUHSMcT4smvDrCfY4AA==
@@ -309,7 +309,7 @@
     "@babel/helper-create-class-features-plugin" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-proposal-decorators@^7.7.4":
+"@babel/plugin-proposal-decorators@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.8.3.tgz#2156860ab65c5abf068c3f67042184041066543e"
   integrity sha512-e3RvdvS4qPJVTe288DlXjwKflpfy1hr0j5dz5WpIYYeP7vQZg2WfAEIp8k5/Lwis/m5REXEteIz6rrcDtXXG7w==
@@ -318,7 +318,7 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-decorators" "^7.8.3"
 
-"@babel/plugin-proposal-do-expressions@^7.7.4":
+"@babel/plugin-proposal-do-expressions@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-do-expressions/-/plugin-proposal-do-expressions-7.8.3.tgz#2ccf97061e93d5ffff986dda3f1b54efe9df7719"
   integrity sha512-NoMcN+0+SS1DVswjDCfz+Jfm9ViOYuFtv1lm0QInEugbEXK2iH3jeSq38WmIiTP+2QKqo2zt8xku77gqHINZkw==
@@ -334,7 +334,7 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-dynamic-import" "^7.8.0"
 
-"@babel/plugin-proposal-export-default-from@^7.7.4":
+"@babel/plugin-proposal-export-default-from@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.8.3.tgz#4cb7c2fdeaed490b60d9bfd3dc8a20f81f9c2e7c"
   integrity sha512-PYtv2S2OdCdp7GSPDg5ndGZFm9DmWFvuLoS5nBxZCgOBggluLnhTScspJxng96alHQzPyrrHxvC9/w4bFuspeA==
@@ -342,7 +342,7 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-export-default-from" "^7.8.3"
 
-"@babel/plugin-proposal-export-namespace-from@^7.7.4":
+"@babel/plugin-proposal-export-namespace-from@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.8.3.tgz#63ad57265d0e3912afd666eb44ce26fa8cd2c774"
   integrity sha512-WKK+9jz6TWUTX1uej9/EUVOmM1sK7aHv6bZyxbUV3NJjbiIZRqJITeXGMo7D631J72PEnIORh5VOlFCSlrLicg==
@@ -350,7 +350,7 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-proposal-function-bind@^7.7.4":
+"@babel/plugin-proposal-function-bind@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-function-bind/-/plugin-proposal-function-bind-7.8.3.tgz#e34a1e984771b84b6e5322745edeadca7e500ced"
   integrity sha512-6q7VAHJQa9x4P6Lm6h6KHoJUEhx2r1buFKseHICe0ogb1LWxducO4tsQp3hd/7BVBo485YBsn6tJnpuwWm/9cA==
@@ -358,7 +358,7 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-function-bind" "^7.8.3"
 
-"@babel/plugin-proposal-function-sent@^7.7.4":
+"@babel/plugin-proposal-function-sent@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-function-sent/-/plugin-proposal-function-sent-7.8.3.tgz#341fd532b7eadbbbdd8bcb715150f279a779f14f"
   integrity sha512-lu9wQjLnXd6Zy6eBKr0gE175xfD+da1rv2wOWEnZlD5KIxl894Tg34ppZ7ANR0jzQJMn+7pGuzSdy6JK4zGtKg==
@@ -367,7 +367,7 @@
     "@babel/helper-wrap-function" "^7.8.3"
     "@babel/plugin-syntax-function-sent" "^7.8.3"
 
-"@babel/plugin-proposal-json-strings@^7.7.4", "@babel/plugin-proposal-json-strings@^7.8.3":
+"@babel/plugin-proposal-json-strings@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.8.3.tgz#da5216b238a98b58a1e05d6852104b10f9a70d6b"
   integrity sha512-KGhQNZ3TVCQG/MjRbAUwuH+14y9q0tpxs1nWWs3pbSleRdDro9SAMMDyye8HhY1gqZ7/NqIc8SKhya0wRDgP1Q==
@@ -375,7 +375,7 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-json-strings" "^7.8.0"
 
-"@babel/plugin-proposal-logical-assignment-operators@^7.7.4":
+"@babel/plugin-proposal-logical-assignment-operators@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.8.3.tgz#e94810d96cb76f20524e66ba617171c21f3c0124"
   integrity sha512-TLPLojGZYBeeoesO2NQIMLUJKD9N5oJlxG6iHLx7l7EvNQP5DfzeyxdI2lMPo5I7ih4Jv/vxrlwIPf6aJw422Q==
@@ -391,7 +391,7 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
 
-"@babel/plugin-proposal-numeric-separator@^7.7.4":
+"@babel/plugin-proposal-numeric-separator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.8.3.tgz#5d6769409699ec9b3b68684cd8116cedff93bad8"
   integrity sha512-jWioO1s6R/R+wEHizfaScNsAx+xKgwTLNXSh7tTC4Usj3ItsPEhYkEpU4h+lpnBwq7NBVOJXfO6cRFYcX69JUQ==
@@ -423,7 +423,7 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-optional-chaining" "^7.8.0"
 
-"@babel/plugin-proposal-pipeline-operator@^7.7.4":
+"@babel/plugin-proposal-pipeline-operator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-pipeline-operator/-/plugin-proposal-pipeline-operator-7.8.3.tgz#c3569228e7466f91bfff7f1c1ae18fb5d36b3097"
   integrity sha512-Z0qV3aUYoLUAnVLdfLTlz/GJYfcrbX7Mhrp897Twik29wQseAFAAXQ4TPvN1oswVBHdN74sLPIn9HVfTXtjuQA==
@@ -431,7 +431,7 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-pipeline-operator" "^7.8.3"
 
-"@babel/plugin-proposal-throw-expressions@^7.7.4":
+"@babel/plugin-proposal-throw-expressions@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-throw-expressions/-/plugin-proposal-throw-expressions-7.8.3.tgz#155f36ae40c2a88ae685c35e3220f8a0d426cf24"
   integrity sha512-tH40s9JnoR+r45ZXKWW+PC5xzPQfVJix3pR1D8Ty5l9sn5NnrbZUzw8MtnNxu/Bz7p0imyeSYj9FQVccEymOEg==
@@ -468,7 +468,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-dynamic-import@^7.7.4", "@babel/plugin-syntax-dynamic-import@^7.8.0":
+"@babel/plugin-syntax-dynamic-import@^7.8.0", "@babel/plugin-syntax-dynamic-import@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3"
   integrity sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==
@@ -503,7 +503,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-import-meta@^7.7.4":
+"@babel/plugin-syntax-import-meta@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.8.3.tgz#230afff79d3ccc215b5944b438e4e266daf3d84d"
   integrity sha512-vYiGd4wQ9gx0Lngb7+bPCwQXGK/PR6FeTIJ+TIOlq+OfOKG/kCAOO2+IBac3oMM9qV7/fU76hfcqxUaLKZf1hQ==
@@ -773,7 +773,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-react-constant-elements@^7.7.4":
+"@babel/plugin-transform-react-constant-elements@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.8.3.tgz#784c25294bddaad2323eb4ff0c9f4a3f6c87d6bc"
   integrity sha512-glrzN2U+egwRfkNFtL34xIBYTxbbUF2qJTP8HD3qETBBqzAWSeNB821X0GjU06+dNpq/UyCIjI72FmGE5NNkQQ==
@@ -788,7 +788,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-react-inline-elements@^7.7.4":
+"@babel/plugin-transform-react-inline-elements@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-inline-elements/-/plugin-transform-react-inline-elements-7.8.3.tgz#fc234d02a35bb188ee3f933d068824e067e42b23"
   integrity sha512-CGKUlW3vtgk6YYrIMyfpohmmpILnaeFwszqwTIcem2LQkK1qWJj5w2yTZ7LJr2IR8F0XQ60AZoM8jgAB4zpxCg==
@@ -804,7 +804,7 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-jsx" "^7.8.3"
 
-"@babel/plugin-transform-react-jsx-source@^7.7.4", "@babel/plugin-transform-react-jsx-source@^7.8.3":
+"@babel/plugin-transform-react-jsx-source@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.8.3.tgz#951e75a8af47f9f120db731be095d2b2c34920e0"
   integrity sha512-PLMgdMGuVDtRS/SzjNEQYUT8f4z1xb2BAT54vM1X5efkVuYBf5WyGUMbpmARcfq3NaglIwz08UVQK4HHHbC6ag==
@@ -835,7 +835,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-runtime@^7.7.4":
+"@babel/plugin-transform-runtime@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.8.3.tgz#c0153bc0a5375ebc1f1591cb7eea223adea9f169"
   integrity sha512-/vqUt5Yh+cgPZXXjmaG9NT8aVfThKk7G4OqkVhrXqwsC5soMn/qTCxs36rZ2QFhpfTJcjw4SNDIZ4RUb8OL4jQ==
@@ -890,7 +890,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/preset-env@^7.7.7":
+"@babel/preset-env@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.8.3.tgz#dc0fb2938f52bbddd79b3c861a4b3427dd3a6c54"
   integrity sha512-Rs4RPL2KjSLSE2mWAx5/iCH+GC1ikKdxPrhnRS6PfFVaiZeom22VFKN4X8ZthyN61kAaR05tfXTbCvatl9WIQg==
@@ -953,7 +953,7 @@
     levenary "^1.1.0"
     semver "^5.5.0"
 
-"@babel/preset-react@^7.7.4":
+"@babel/preset-react@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.8.3.tgz#23dc63f1b5b0751283e04252e78cf1d6589273d2"
   integrity sha512-9hx0CwZg92jGb7iHYQVgi0tOEHP/kM60CtWJQnmbATSPIQQ2xYzfoCI3EdqAhFBeeJwYMdWQuDUHMsuDbH9hyQ==
@@ -964,7 +964,7 @@
     "@babel/plugin-transform-react-jsx-self" "^7.8.3"
     "@babel/plugin-transform-react-jsx-source" "^7.8.3"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.6.3":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.3.tgz#0811944f73a6c926bb2ad35e918dcc1bfab279f1"
   integrity sha512-fVHx1rzEmwB130VTkLnxR+HmxcTjGzH12LYQcFFoBwakMd3aOMD4OsRN7tGG/UOYE2ektgFrS8uACAoRk1CY0w==
@@ -5906,7 +5906,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.4:
+hoist-non-react-statics@^2.3.1:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
@@ -6060,10 +6060,10 @@ i18next@^10.6.0:
   resolved "https://registry.yarnpkg.com/i18next/-/i18next-10.6.0.tgz#90ffd9f9bc617f34b9a12e037260f524445f7684"
   integrity sha1-kP/Z+bxhfzS5oS4DcmD1JERfdoQ=
 
-iban@^0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/iban/-/iban-0.0.10.tgz#1a6aeb08e85cd98d5651c5e0c08c5c0de81ba78d"
-  integrity sha512-dhZx+nrJxova6SItfICUEswGSkXD6ky3WiIUmDPlpadqOlogTmTlq2t8Yx6Ii5YNYLzU0TXcehVrHDDdQBLlXQ==
+iban@^0.0.12:
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/iban/-/iban-0.0.12.tgz#557d4b29b27a5a985e399eaf36f73512c98ec8b6"
+  integrity sha512-j+beWwI28a0tOzb2pTEVPwVl3dpWEuVI7EawGb6bUQD1j2GilGnETTnwIPzQZd1sQQuO4ET0giYt7fQkJ6bB3A==
 
 iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
   version "0.4.24"
@@ -6104,7 +6104,7 @@ immer@^4.0.1:
   resolved "https://registry.yarnpkg.com/immer/-/immer-4.0.2.tgz#9ff0fcdf88e06f92618a5978ceecb5884e633559"
   integrity sha512-Q/tm+yKqnKy4RIBmmtISBlhXuSDrB69e9EKTYiIenIKQkXBQir43w+kN/eGiax3wt1J0O1b2fYcNqLSbEcXA7w==
 
-immutable@^3.8.2:
+immutable@3.8.2, immutable@^3.8.2:
   version "3.8.2"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
   integrity sha1-wkOZUUVbs5kT2vKBN28VMOEErfM=
@@ -7494,7 +7494,7 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
-lodash-es@^4.17.10, lodash-es@^4.2.1:
+lodash-es@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
   integrity sha512-rlrc3yU3+JNOpZ9zj5pQtxnx2THmvRykwL4Xlxoa8I9lHBlVbbyPhgyPMioxVZ4NqyxaVVtaJnzsyOidQIhyyQ==
@@ -7648,7 +7648,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.0.0, lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.8.0, lodash@~4.17.10:
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.8.0, lodash@~4.17.10:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -9806,7 +9806,7 @@ react-copy-to-clipboard@^5.0.1:
     copy-to-clipboard "^3"
     prop-types "^15.5.8"
 
-react-dom@^16.4.1:
+react-dom@^16.12.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.12.0.tgz#0da4b714b8d13c2038c9396b54a92baea633fe11"
   integrity sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==
@@ -9872,7 +9872,7 @@ react-json-view@^1.17.1:
     react-lifecycles-compat "^3.0.4"
     react-textarea-autosize "^6.1.0"
 
-react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@@ -9904,18 +9904,17 @@ react-number-format@^4.0.7:
   dependencies:
     prop-types "^15.7.2"
 
-react-redux@^5.0.7:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.2.tgz#b19cf9e21d694422727bf798e934a916c4080f57"
-  integrity sha512-Ns1G0XXc8hDyH/OcBHOxNgQx9ayH3SPxBnFCOidGKSle8pKihysQw2rG/PmciUQRoclhVBO8HMhiRmGXnDja9Q==
+react-redux@^7.1.3:
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.3.tgz#717a3d7bbe3a1b2d535c94885ce04cdc5a33fc79"
+  integrity sha512-uI1wca+ECG9RoVkWQFF4jDMqmaw0/qnvaSvOoL/GA4dNxf6LoV8sUAcNDvE5NWKs4hFpn0t6wswNQnY3f7HT3w==
   dependencies:
-    "@babel/runtime" "^7.1.2"
+    "@babel/runtime" "^7.5.5"
     hoist-non-react-statics "^3.3.0"
     invariant "^2.2.4"
-    loose-envify "^1.1.0"
-    prop-types "^15.6.1"
-    react-is "^16.6.0"
-    react-lifecycles-compat "^3.0.0"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.9.0"
 
 react-router-dom@^5.1.2:
   version "5.1.2"
@@ -10021,7 +10020,7 @@ react-windowed-list@^2.0.0:
     raf "^3.3.2"
     remeasure "^3.0.1"
 
-react@^16.6.3:
+react@^16.12.0:
   version "16.12.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
   integrity sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==
@@ -10209,19 +10208,23 @@ redux-devtools-extension@^2.13.8:
   resolved "https://registry.yarnpkg.com/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"
   integrity sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==
 
-redux-form@^7.4.2:
-  version "7.4.2"
-  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-7.4.2.tgz#d6061088fb682eb9fc5fb9749bd8b102f03154b0"
-  integrity sha512-QxC36s4Lelx5Cr8dbpxqvl23dwYOydeAX8c6YPmgkz/Dhj053C16S2qoyZN6LO6HJ2oUF00rKsAyE94GwOUhFA==
+redux-form@^8.2.6:
+  version "8.2.6"
+  resolved "https://registry.yarnpkg.com/redux-form/-/redux-form-8.2.6.tgz#6840bbe9ed5b2aaef9dd82e6db3e5efcfddd69b1"
+  integrity sha512-krmF7wl1C753BYpEpWIVJ5NM4lUJZFZc5GFUVgblT+jprB99VVBDyBcgrZM3gWWLOcncFyNsHcKNQQcFg8Uanw==
   dependencies:
+    "@babel/runtime" "^7.2.0"
     es6-error "^4.1.1"
-    hoist-non-react-statics "^2.5.4"
+    hoist-non-react-statics "^3.2.1"
     invariant "^2.2.4"
     is-promise "^2.1.0"
-    lodash "^4.17.10"
-    lodash-es "^4.17.10"
+    lodash "^4.17.15"
+    lodash-es "^4.17.15"
     prop-types "^15.6.1"
+    react-is "^16.7.0"
     react-lifecycles-compat "^3.0.4"
+  optionalDependencies:
+    immutable "3.8.2"
 
 redux-immutable-state-invariant@^2.1.0:
   version "2.1.0"
@@ -10250,17 +10253,7 @@ redux-thunk@^2.2.0, redux-thunk@^2.3.0:
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
   integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
 
-redux@^3.7.2:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-3.7.2.tgz#06b73123215901d25d065be342eb026bc1c8537b"
-  integrity sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==
-  dependencies:
-    lodash "^4.2.1"
-    lodash-es "^4.2.1"
-    loose-envify "^1.1.0"
-    symbol-observable "^1.0.3"
-
-redux@^4.0.0, redux@^4.0.4:
+redux@^4.0.0, redux@^4.0.4, redux@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
   integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
@@ -11538,7 +11531,7 @@ svgo@^0.7.0:
     sax "~1.2.1"
     whet.extend "~0.9.9"
 
-symbol-observable@1.2.0, symbol-observable@^1.0.3, symbol-observable@^1.0.4, symbol-observable@^1.1.0, symbol-observable@^1.2.0:
+symbol-observable@1.2.0, symbol-observable@^1.0.4, symbol-observable@^1.1.0, symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==