Merge branch 'update' into 'develop'

Update some dependencies, remove `react-router-scroll-4`

See merge request soapbox-pub/soapbox-fe!1557

app/soapbox/containers/soapbox.tsx

@@ -5,8 +5,6 @@ import React, { useState, useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom';
-// @ts-ignore: it doesn't have types
-import { ScrollContext } from 'react-router-scroll-4';
 
 import { loadInstance } from 'soapbox/actions/instance';
 import { fetchMe } from 'soapbox/actions/me';
@@ -116,11 +114,6 @@ const SoapboxMount = () => {
     });
   }, []);
 
-  // @ts-ignore: I don't actually know what these should be, lol
-  const shouldUpdateScroll = (prevRouterProps, { location }) => {
-    return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey);
-  };
-
   /** Whether to display a loading indicator. */
   const showLoading = [
     me === null,
@@ -228,19 +221,17 @@ const SoapboxMount = () => {
       {helmet}
       <ErrorBoundary>
         <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
-          <ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
-            <>
-              {renderBody()}
+          <>
+            {renderBody()}
 
-              <BundleContainer fetchComponent={NotificationsContainer}>
-                {(Component) => <Component />}
-              </BundleContainer>
+            <BundleContainer fetchComponent={NotificationsContainer}>
+              {(Component) => <Component />}
+            </BundleContainer>
 
-              <BundleContainer fetchComponent={ModalContainer}>
-                {Component => <Component />}
-              </BundleContainer>
-            </>
-          </ScrollContext>
+            <BundleContainer fetchComponent={ModalContainer}>
+              {Component => <Component />}
+            </BundleContainer>
+          </>
         </BrowserRouter>
       </ErrorBoundary>
     </IntlProvider>

app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx

@@ -1,4 +1,4 @@
-import QRCode from 'qrcode.react';
+import { QRCodeCanvas as QRCode } from 'qrcode.react';
 import React from 'react';
 
 import Icon from 'soapbox/components/icon';

app/soapbox/features/security/mfa/otp_confirm_form.tsx

@@ -1,4 +1,4 @@
-import QRCode from 'qrcode.react';
+import { QRCodeCanvas as QRCode } from 'qrcode.react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { useHistory } from 'react-router-dom';