Pass `app` via custom context

16 files changed, 157 insertions, 125 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 2613aacb88..f9c2390b25 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -11,6 +11,7 @@ import { Provider } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import ErrorBoundary from './components/ErrorBoundary';
+import { AppContext } from './context';
 import AppRoutes from './routes';
 
 import accountActions from './redux/account/actions';
@@ -212,13 +213,15 @@ export default class AppRenderer {
 
   public renderView() {
     return (
-      <Provider store={this.reduxStore}>
-        <ConnectedRouter history={this.memoryHistory}>
-          <ErrorBoundary>
-            <AppRoutes sharedProps={{ app: this }} />
-          </ErrorBoundary>
-        </ConnectedRouter>
-      </Provider>
+      <AppContext.Provider value={{ app: this }}>
+        <Provider store={this.reduxStore}>
+          <ConnectedRouter history={this.memoryHistory}>
+            <ErrorBoundary>
+              <AppRoutes />
+            </ErrorBoundary>
+          </ConnectedRouter>
+        </Provider>
+      </AppContext.Provider>
     );
   }
 
diff --git a/gui/src/renderer/components/Connect.tsx b/gui/src/renderer/components/Connect.tsx
index 08b9a3c35a..d3b9bd0f93 100644
--- a/gui/src/renderer/components/Connect.tsx
+++ b/gui/src/renderer/components/Connect.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Component, Styles, View } from 'reactxp';
 import { links } from '../../config.json';
+import NotificationAreaContainer from '../containers/NotificationAreaContainer';
 import AccountExpiry from '../lib/account-expiry';
 import { AuthFailureKind, parseAuthFailure } from '../lib/auth-failure';
 import { IConnectionReduxState } from '../redux/connection/reducers';
@@ -10,7 +11,6 @@ import { Brand, HeaderBarStyle, SettingsBarButton } from './HeaderBar';
 import ImageView from './ImageView';
 import { Container, Header, Layout } from './Layout';
 import Map, { MarkerStyle, ZoomLevel } from './Map';
-import NotificationAreaContainer from '../containers/NotificationAreaContainer';
 import TunnelControl from './TunnelControl';
 
 interface IProps {
diff --git a/gui/src/renderer/containers/AccountPage.tsx b/gui/src/renderer/containers/AccountPage.tsx
index ee8588a7c3..4880cec68e 100644
--- a/gui/src/renderer/containers/AccountPage.tsx
+++ b/gui/src/renderer/containers/AccountPage.tsx
@@ -5,16 +5,16 @@ import { bindActionCreators } from 'redux';
 import { links } from '../../config.json';
 import Account from '../components/Account';
 
+import withAppContext, { IAppContext } from '../context';
 import { IReduxState, ReduxDispatch } from '../redux/store';
-import { ISharedRouteProps } from '../routes';
 
-const mapStateToProps = (state: IReduxState, _props: ISharedRouteProps) => ({
+const mapStateToProps = (state: IReduxState) => ({
   accountToken: state.account.accountToken,
   accountExpiry: state.account.expiry,
   expiryLocale: state.userInterface.locale,
   isOffline: state.connection.isBlocked,
 });
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) => {
+const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
   const history = bindActionCreators({ goBack }, dispatch);
   return {
     onLogout: () => {
@@ -27,7 +27,9 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) =
   };
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(Account);
+export default withAppContext(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps,
+  )(Account),
+);
diff --git a/gui/src/renderer/containers/AdvancedSettingsPage.tsx b/gui/src/renderer/containers/AdvancedSettingsPage.tsx
index 8feafe8e58..e31365b86d 100644
--- a/gui/src/renderer/containers/AdvancedSettingsPage.tsx
+++ b/gui/src/renderer/containers/AdvancedSettingsPage.tsx
@@ -6,9 +6,9 @@ import { BridgeState, RelayProtocol, TunnelProtocol } from '../../shared/daemon-
 import RelaySettingsBuilder from '../../shared/relay-settings-builder';
 import AdvancedSettings from '../components/AdvancedSettings';
 
+import withAppContext, { IAppContext } from '../context';
 import { RelaySettingsRedux } from '../redux/settings/reducers';
 import { IReduxState, ReduxDispatch } from '../redux/store';
-import { ISharedRouteProps } from '../routes';
 
 const mapStateToProps = (state: IReduxState) => {
   const protocolAndPort = mapRelaySettingsToProtocolAndPort(state.settings.relaySettings);
@@ -51,7 +51,7 @@ const mapRelaySettingsToProtocolAndPort = (relaySettings: RelaySettingsRedux) =>
   }
 };
 
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) => {
+const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
   const history = bindActionCreators({ push, goBack }, dispatch);
   return {
     onClose: () => {
@@ -150,7 +150,9 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) =
   };
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(AdvancedSettings);
+export default withAppContext(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps,
+  )(AdvancedSettings),
+);
diff --git a/gui/src/renderer/containers/ConnectPage.tsx b/gui/src/renderer/containers/ConnectPage.tsx
index ffc7b76299..8d30bdc149 100644
--- a/gui/src/renderer/containers/ConnectPage.tsx
+++ b/gui/src/renderer/containers/ConnectPage.tsx
@@ -6,10 +6,10 @@ import { bindActionCreators } from 'redux';
 import { sprintf } from 'sprintf-js';
 import { messages } from '../../shared/gettext';
 import Connect from '../components/Connect';
+import withAppContext, { IAppContext } from '../context';
 import AccountExpiry from '../lib/account-expiry';
 import { IRelayLocationRedux, RelaySettingsRedux } from '../redux/settings/reducers';
 import { IReduxState, ReduxDispatch } from '../redux/store';
-import { ISharedRouteProps } from '../routes';
 
 function getRelayName(
   relaySettings: RelaySettingsRedux,
@@ -64,7 +64,7 @@ function getRelayName(
   }
 }
 
-const mapStateToProps = (state: IReduxState, _props: ISharedRouteProps) => {
+const mapStateToProps = (state: IReduxState) => {
   return {
     accountExpiry: state.account.expiry
       ? new AccountExpiry(state.account.expiry, state.userInterface.locale)
@@ -76,7 +76,7 @@ const mapStateToProps = (state: IReduxState, _props: ISharedRouteProps) => {
   };
 };
 
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) => {
+const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
   const history = bindActionCreators({ push }, dispatch);
 
   return {
@@ -104,7 +104,9 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) =
   };
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(Connect);
+export default withAppContext(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps,
+  )(Connect),
+);
diff --git a/gui/src/renderer/containers/LaunchPage.tsx b/gui/src/renderer/containers/LaunchPage.tsx
index 8619b33d87..cc50fae24f 100644
--- a/gui/src/renderer/containers/LaunchPage.tsx
+++ b/gui/src/renderer/containers/LaunchPage.tsx
@@ -2,15 +2,13 @@ import { push } from 'connected-react-router';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Launch from '../components/Launch';
-
 import { IReduxState, ReduxDispatch } from '../redux/store';
-import { ISharedRouteProps } from '../routes';
 
 const mapStateToProps = (_state: IReduxState) => ({});
-const mapDispatchToProps = (dispatch: ReduxDispatch, _props: ISharedRouteProps) => {
+const mapDispatchToProps = (dispatch: ReduxDispatch) => {
   const history = bindActionCreators({ push }, dispatch);
   return {
-    openSettings: () => {
+    openSettings() {
       history.push('/settings');
     },
   };
diff --git a/gui/src/renderer/containers/LoginPage.tsx b/gui/src/renderer/containers/LoginPage.tsx
index e1f70fbedb..da4a6948dc 100644
--- a/gui/src/renderer/containers/LoginPage.tsx
+++ b/gui/src/renderer/containers/LoginPage.tsx
@@ -3,10 +3,9 @@ import { shell } from 'electron';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Login from '../components/Login';
+import withAppContext, { IAppContext } from '../context';
 import accountActions from '../redux/account/actions';
-
 import { IReduxState, ReduxDispatch } from '../redux/store';
-import { ISharedRouteProps } from '../routes';
 
 const mapStateToProps = (state: IReduxState) => {
   const { accountToken, accountHistory, error, status } = state.account;
@@ -17,7 +16,7 @@ const mapStateToProps = (state: IReduxState) => {
     loginState: status,
   };
 };
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) => {
+const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
   const history = bindActionCreators({ push }, dispatch);
   const { resetLoginError, updateAccountToken } = bindActionCreators(accountActions, dispatch);
   return {
@@ -36,7 +35,9 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) =
   };
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(Login);
+export default withAppContext(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps,
+  )(Login),
+);
diff --git a/gui/src/renderer/containers/NotificationAreaContainer.tsx b/gui/src/renderer/containers/NotificationAreaContainer.tsx
index 27e86c57ba..90c8938b9d 100644
--- a/gui/src/renderer/containers/NotificationAreaContainer.tsx
+++ b/gui/src/renderer/containers/NotificationAreaContainer.tsx
@@ -1,12 +1,13 @@
-import { shell } from 'electron';
 import { connect } from 'react-redux';
-import NotificationArea from '../components/NotificationArea';
+
+import { shell } from 'electron';
 import { links } from '../../config.json';
-import { IReduxState, ReduxDispatch } from '../redux/store';
-import { ISharedRouteProps } from '../routes';
+import NotificationArea from '../components/NotificationArea';
+import withAppContext, { IAppContext } from '../context';
 import AccountExpiry from '../lib/account-expiry';
+import { IReduxState, ReduxDispatch } from '../redux/store';
 
-const mapStateToProps = (state: IReduxState) => ({
+const mapStateToProps = (state: IReduxState, _props: IAppContext) => ({
   accountExpiry: state.account.expiry
     ? new AccountExpiry(state.account.expiry, state.userInterface.locale)
     : undefined,
@@ -15,7 +16,7 @@ const mapStateToProps = (state: IReduxState) => ({
   blockWhenDisconnected: state.settings.blockWhenDisconnected,
 });
 
-const mapDispatchToProps = (_dispatch: ReduxDispatch, _props: ISharedRouteProps) => {
+const mapDispatchToProps = (_dispatch: ReduxDispatch, _props: IAppContext) => {
   return {
     onOpenDownloadLink() {
       shell.openExternal(links.download);
@@ -26,7 +27,9 @@ const mapDispatchToProps = (_dispatch: ReduxDispatch, _props: ISharedRouteProps)
   };
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(NotificationArea);
+export default withAppContext(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps,
+  )(NotificationArea),
+);
diff --git a/gui/src/renderer/containers/PreferencesPage.tsx b/gui/src/renderer/containers/PreferencesPage.tsx
index c78daccf29..497da2166c 100644
--- a/gui/src/renderer/containers/PreferencesPage.tsx
+++ b/gui/src/renderer/containers/PreferencesPage.tsx
@@ -3,9 +3,8 @@ import log from 'electron-log';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Preferences from '../components/Preferences';
-
+import withAppContext, { IAppContext } from '../context';
 import { IReduxState, ReduxDispatch } from '../redux/store';
-import { ISharedRouteProps } from '../routes';
 
 const mapStateToProps = (state: IReduxState) => ({
   autoStart: state.settings.autoStart,
@@ -16,7 +15,7 @@ const mapStateToProps = (state: IReduxState) => ({
   startMinimized: state.settings.guiSettings.startMinimized,
 });
 
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) => {
+const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
   const history = bindActionCreators({ goBack }, dispatch);
   return {
     onClose: () => {
@@ -49,7 +48,9 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) =
   };
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(Preferences);
+export default withAppContext(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps,
+  )(Preferences),
+);
diff --git a/gui/src/renderer/containers/SelectLanguagePage.tsx b/gui/src/renderer/containers/SelectLanguagePage.tsx
index 248e63e367..4be5e5472a 100644
--- a/gui/src/renderer/containers/SelectLanguagePage.tsx
+++ b/gui/src/renderer/containers/SelectLanguagePage.tsx
@@ -2,15 +2,14 @@ import { goBack } from 'connected-react-router';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import SelectLanguage from '../components/SelectLanguage';
-
+import withAppContext, { IAppContext } from '../context';
 import { IReduxState, ReduxDispatch } from '../redux/store';
-import { ISharedRouteProps } from '../routes';
 
 const mapStateToProps = (state: IReduxState) => ({
   preferredLocale: state.settings.guiSettings.preferredLocale,
 });
 
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) => {
+const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
   const history = bindActionCreators({ goBack }, dispatch);
 
   return {
@@ -25,7 +24,9 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) =
   };
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(SelectLanguage);
+export default withAppContext(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps,
+  )(SelectLanguage),
+);
diff --git a/gui/src/renderer/containers/SelectLocationPage.tsx b/gui/src/renderer/containers/SelectLocationPage.tsx
index 85cd29dc09..defe734aff 100644
--- a/gui/src/renderer/containers/SelectLocationPage.tsx
+++ b/gui/src/renderer/containers/SelectLocationPage.tsx
@@ -6,10 +6,10 @@ import BridgeSettingsBuilder from '../../shared/bridge-settings-builder';
 import { LiftedConstraint, RelayLocation } from '../../shared/daemon-rpc-types';
 import RelaySettingsBuilder from '../../shared/relay-settings-builder';
 import SelectLocation from '../components/SelectLocation';
+import withAppContext, { IAppContext } from '../context';
 import { IReduxState, ReduxDispatch } from '../redux/store';
 import userInterfaceActions from '../redux/userinterface/actions';
 import { LocationScope } from '../redux/userinterface/reducers';
-import { ISharedRouteProps } from '../routes';
 
 const mapStateToProps = (state: IReduxState) => {
   let selectedExitLocation: RelayLocation | undefined;
@@ -40,7 +40,7 @@ const mapStateToProps = (state: IReduxState) => {
     allowBridgeSelection,
   };
 };
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) => {
+const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
   const history = bindActionCreators({ goBack }, dispatch);
   const userInterface = bindActionCreators(userInterfaceActions, dispatch);
 
@@ -89,7 +89,9 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) =
   };
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(SelectLocation);
+export default withAppContext(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps,
+  )(SelectLocation),
+);
diff --git a/gui/src/renderer/containers/SettingsPage.tsx b/gui/src/renderer/containers/SettingsPage.tsx
index 927a2cd40f..b3cf582140 100644
--- a/gui/src/renderer/containers/SettingsPage.tsx
+++ b/gui/src/renderer/containers/SettingsPage.tsx
@@ -3,11 +3,9 @@ import { remote, shell } from 'electron';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Settings from '../components/Settings';
-
 import { IReduxState, ReduxDispatch } from '../redux/store';
-import { ISharedRouteProps } from '../routes';
 
-const mapStateToProps = (state: IReduxState, _props: ISharedRouteProps) => ({
+const mapStateToProps = (state: IReduxState) => ({
   preferredLocaleDisplayName: state.userInterface.preferredLocaleName,
   loginState: state.account.status,
   accountExpiry: state.account.expiry,
@@ -17,7 +15,7 @@ const mapStateToProps = (state: IReduxState, _props: ISharedRouteProps) => ({
   upToDateVersion: !state.version.currentIsOutdated,
   isOffline: state.connection.isBlocked,
 });
-const mapDispatchToProps = (dispatch: ReduxDispatch, _props: ISharedRouteProps) => {
+const mapDispatchToProps = (dispatch: ReduxDispatch) => {
   const history = bindActionCreators({ push, goBack }, dispatch);
   return {
     onQuit: () => remote.app.quit(),
diff --git a/gui/src/renderer/containers/SupportPage.tsx b/gui/src/renderer/containers/SupportPage.tsx
index 00be7fee44..755e67f4de 100644
--- a/gui/src/renderer/containers/SupportPage.tsx
+++ b/gui/src/renderer/containers/SupportPage.tsx
@@ -4,10 +4,8 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import Support from '../components/Support';
 import { collectProblemReport, sendProblemReport } from '../lib/problem-report';
-
 import { IReduxState, ReduxDispatch } from '../redux/store';
 import supportActions from '../redux/support/actions';
-import { ISharedRouteProps } from '../routes';
 
 const mapStateToProps = (state: IReduxState) => ({
   defaultEmail: state.support.email,
@@ -16,15 +14,17 @@ const mapStateToProps = (state: IReduxState) => ({
   isOffline: state.connection.isBlocked,
 });
 
-const mapDispatchToProps = (dispatch: ReduxDispatch, _props: ISharedRouteProps) => {
+const mapDispatchToProps = (dispatch: ReduxDispatch) => {
   const { saveReportForm, clearReportForm } = bindActionCreators(supportActions, dispatch);
   const history = bindActionCreators({ goBack }, dispatch);
 
   return {
-    onClose: () => {
+    onClose() {
       history.goBack();
     },
-    viewLog: (path: string) => shell.openItem(path),
+    viewLog(path: string) {
+      shell.openItem(path);
+    },
     saveReportForm,
     clearReportForm,
     collectProblemReport,
diff --git a/gui/src/renderer/containers/WireguardKeysPage.tsx b/gui/src/renderer/containers/WireguardKeysPage.tsx
index 8c88a042cc..911093f9ca 100644
--- a/gui/src/renderer/containers/WireguardKeysPage.tsx
+++ b/gui/src/renderer/containers/WireguardKeysPage.tsx
@@ -4,16 +4,16 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { links } from '../../config.json';
 import WireguardKeys from '../components/WireguardKeys';
+import withAppContext, { IAppContext } from '../context';
 import { IWgKey } from '../redux/settings/reducers';
 import { IReduxState, ReduxDispatch } from '../redux/store';
-import { ISharedRouteProps } from '../routes';
 
-const mapStateToProps = (state: IReduxState, _props: ISharedRouteProps) => ({
+const mapStateToProps = (state: IReduxState) => ({
   keyState: state.settings.wireguardKeyState,
   isOffline: state.connection.isBlocked,
   locale: state.userInterface.locale,
 });
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) => {
+const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
   const history = bindActionCreators({ push, goBack }, dispatch);
   return {
     onClose: () => history.goBack(),
@@ -24,7 +24,9 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: ISharedRouteProps) =
   };
 };
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(WireguardKeys);
+export default withAppContext(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps,
+  )(WireguardKeys),
+);
diff --git a/gui/src/renderer/context.tsx b/gui/src/renderer/context.tsx
new file mode 100644
index 0000000000..e54f16b1ea
--- /dev/null
+++ b/gui/src/renderer/context.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import App from './app';
+
+export interface IAppContext {
+  app: App;
+}
+
+export const AppContext = React.createContext<IAppContext | undefined>(undefined);
+if (process.env.NODE_ENV === 'development') {
+  AppContext.displayName = 'AppContext';
+}
+
+export default function withAppContext<Props>(BaseComponent: React.ComponentClass<Props>) {
+  // Exclude the IAppContext from props since those are injected props
+  const wrappedComponent = (props: Omit<Props, keyof IAppContext>) => {
+    return (
+      <AppContext.Consumer>
+        {(context) => {
+          if (context) {
+            // Enforce type because Typescript does not recognize that
+            // (Props ~ IAppContext & IAppContext) is identical to Props.
+            const mergedProps = ({ ...props, ...context } as unknown) as Props;
+
+            return <BaseComponent {...mergedProps} />;
+          } else {
+            throw new Error(
+              'The context value is empty. Make sure to wrap the component in AppContext.Provider.',
+            );
+          }
+        }}
+      </AppContext.Consumer>
+    );
+  };
+
+  if (process.env.NODE_ENV === 'development') {
+    wrappedComponent.displayName =
+      'withAppContext(' + (BaseComponent.displayName || BaseComponent.name) + ')';
+  }
+
+  return wrappedComponent;
+}
diff --git a/gui/src/renderer/routes.tsx b/gui/src/renderer/routes.tsx
index 2f715c472a..d3ddc95128 100644
--- a/gui/src/renderer/routes.tsx
+++ b/gui/src/renderer/routes.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Route, RouteComponentProps, RouteProps, Switch, withRouter } from 'react-router';
-import App from './app';
+import { Route, RouteComponentProps, Switch, withRouter } from 'react-router';
 import TransitionContainer, { TransitionView } from './components/TransitionContainer';
 import AccountPage from './containers/AccountPage';
 import AdvancedSettingsPage from './containers/AdvancedSettingsPage';
@@ -16,27 +15,15 @@ import SupportPage from './containers/SupportPage';
 import WireguardKeysPage from './containers/WireguardKeysPage';
 import { getTransitionProps } from './transitions';
 
-export interface ISharedRouteProps {
-  app: App;
-}
-
-type CustomRouteProps = {
-  component: React.ComponentClass<ISharedRouteProps>;
-} & RouteProps;
-
-interface IAppRoutesProps extends RouteComponentProps {
-  sharedProps: ISharedRouteProps;
-}
-
 interface IAppRoutesState {
-  previousLocation?: IAppRoutesProps['location'];
-  currentLocation: IAppRoutesProps['location'];
+  previousLocation?: RouteComponentProps['location'];
+  currentLocation: RouteComponentProps['location'];
 }
 
-class AppRoutes extends React.Component<IAppRoutesProps, IAppRoutesState> {
+class AppRoutes extends React.Component<RouteComponentProps, IAppRoutesState> {
   private unobserveHistory?: () => void;
 
-  constructor(props: IAppRoutesProps) {
+  constructor(props: RouteComponentProps) {
     super(props);
 
     this.state = {
@@ -68,37 +55,26 @@ class AppRoutes extends React.Component<IAppRoutesProps, IAppRoutesState> {
       location.pathname,
     );
 
-    // Renders a route extended with shared props
-    const CustomRoute = ({ component: ComponentClass, ...routeProps }: CustomRouteProps) => {
-      const renderOverride = () => <ComponentClass {...this.props.sharedProps} />;
-
-      return <Route {...routeProps} render={renderOverride} />;
-    };
-
     return (
       <PlatformWindowContainer>
         <TransitionContainer {...transitionProps}>
           <TransitionView viewId={location.key || ''}>
             <Switch key={location.key} location={location}>
-              <CustomRoute exact={true} path="/" component={LaunchPage} />
-              <CustomRoute exact={true} path="/login" component={LoginPage} />
-              <CustomRoute exact={true} path="/connect" component={ConnectPage} />
-              <CustomRoute exact={true} path="/settings" component={SettingsPage} />
-              <CustomRoute exact={true} path="/settings/language" component={SelectLanguagePage} />
-              <CustomRoute exact={true} path="/settings/account" component={AccountPage} />
-              <CustomRoute exact={true} path="/settings/preferences" component={PreferencesPage} />
-              <CustomRoute
-                exact={true}
-                path="/settings/advanced"
-                component={AdvancedSettingsPage}
-              />
-              <CustomRoute
+              <Route exact={true} path="/" component={LaunchPage} />
+              <Route exact={true} path="/login" component={LoginPage} />
+              <Route exact={true} path="/connect" component={ConnectPage} />
+              <Route exact={true} path="/settings" component={SettingsPage} />
+              <Route exact={true} path="/settings/language" component={SelectLanguagePage} />
+              <Route exact={true} path="/settings/account" component={AccountPage} />
+              <Route exact={true} path="/settings/preferences" component={PreferencesPage} />
+              <Route exact={true} path="/settings/advanced" component={AdvancedSettingsPage} />
+              <Route
                 exact={true}
                 path="/settings/advanced/wireguard-keys"
                 component={WireguardKeysPage}
               />
-              <CustomRoute exact={true} path="/settings/support" component={SupportPage} />
-              <CustomRoute exact={true} path="/select-location" component={SelectLocationPage} />
+              <Route exact={true} path="/settings/support" component={SupportPage} />
+              <Route exact={true} path="/select-location" component={SelectLocationPage} />
             </Switch>
           </TransitionView>
         </TransitionContainer>