mobx bump

packages/yoroi-extension/app/App.js

@@ -3,7 +3,6 @@ import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import { Router } from 'react-router-dom';
-import type { RouterHistory } from 'react-router-dom';
 import { addLocaleData, IntlProvider } from 'react-intl';
 import { observable, autorun, runInAction } from 'mobx';
 import { Routes } from './Routes';
@@ -28,7 +27,7 @@ addLocaleData(locales);
 type Props = {|
   +stores: StoresMap,
   +actions: ActionsMap,
-  +history: RouterHistory,
+  +history: any,
 |};
 type State = {|
   crashed: boolean,

packages/yoroi-extension/app/Routes.js

@@ -4,7 +4,7 @@ import type { StoresMap } from './stores/index';
 import type { ActionsMap } from './actions/index';
 import type { StoresAndActionsProps } from './types/injectedProps.types';
 import type { ConfigType } from '../config/config-types';
-import { Route, Redirect, Switch } from 'react-router-dom';
+import { Route, Navigate as Redirect, Routes as Switch } from 'react-router-dom';
 import { ROUTES } from './routes-config';
 import React, { Suspense } from 'react';
 import StakingPage, { StakingPageContentPromise } from './containers/wallet/staking/StakingPage';

packages/yoroi-extension/app/connector/App.js

@@ -27,7 +27,6 @@ import type { ActionsMap } from './actions';
 import ThemeManager from '../ThemeManager';
 import CrashPage from '../containers/CrashPage';
 import { Logger } from '../utils/logging';
-import type { RouterHistory } from 'react-router-dom';
 import { ThemeProvider } from '@mui/material/styles';
 import { globalStyles } from '../styles/globalStyles';
 import { CssBaseline } from '@mui/material';
@@ -56,7 +55,7 @@ addLocaleData([
 type Props = {|
   +stores: StoresMap,
   +actions: ActionsMap,
-  +history: RouterHistory,
+  +history: any,
 |};
 type State = {|
   crashed: boolean,

packages/yoroi-extension/app/connector/Routes.js

@@ -1,6 +1,6 @@
 // @flow
 import type { Node } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Routes as Switch } from 'react-router-dom';
 import type { StoresMap } from './stores/index';
 import type { ActionsMap } from './actions/index';
 import { ROUTES } from './routes-config';

packages/yoroi-extension/app/containers/hooks.js

@@ -0,0 +1,23 @@
+//@flow
+
+import { useParams, useLocation } from 'react-router';
+
+export const withParams = <T>(Component: React$ComponentType<any>): React$ComponentType<T> => {
+  // noinspection UnnecessaryLocalVariableJS
+  const Wrapper = (props) =>{
+    const params = useParams();
+    return <Component params={params} {...props}/>
+  }
+  return Wrapper;
+}
+
+export const withLocation = <T>(Component: React$ComponentType<any>): React$ComponentType<T> => {
+  // noinspection UnnecessaryLocalVariableJS
+  const Wrapper = (props) =>{
+    const location: Location = useLocation();
+    return <Component location={location} {...props}/>
+  }
+  return Wrapper;
+}
+
+export type Location = {| search: { [string]: string, ... } |};

packages/yoroi-extension/app/containers/settings/categories/OAuthDropboxPage.js

@@ -1,7 +1,7 @@
 // @flow
 import type { Node } from 'react';
 import { Component } from 'react';
-import { Redirect } from 'react-router-dom';
+import { Navigate as Redirect } from 'react-router-dom';
 import { observer } from 'mobx-react';
 import type { StoresAndActionsProps } from '../../../types/injectedProps.types';
 import { ExternalStorageList } from '../../../domain/ExternalStorage';

packages/yoroi-extension/app/containers/wallet/NFTDetailPageRevamp.js

@@ -9,21 +9,21 @@ import {
   getTokenStrictName,
 } from '../../stores/stateless/tokenHelpers';
 import { truncateToken } from '../../utils/formatters';
-import type { Match, Location } from 'react-router-dom';
-import { withRouter } from 'react-router-dom';
 import { Box } from '@mui/system';
 import NFTDetails from '../../components/wallet/assets/NFTDetails';
 import {
   getAuthorFromTokenMetadata,
   getDescriptionFromTokenMetadata,
   getImageFromTokenMetadata,
 } from '../../utils/nftMetadata';
+import { withLocation, withParams } from '../hooks';
+import type { Location } from '../hooks';
 
 type Props = {|
   ...StoresAndActionsProps,
 |};
 type MatchProps = {|
-  match: Match,
+  params: any,
   location: Location,
 |};
 
@@ -77,7 +77,7 @@ class NFTDetailPageRevamp extends Component<AllProps> {
               };
             });
 
-    const { nftId } = this.props.match.params;
+    const { nftId } = this.props.params;
     const currentNftIdx = nftsList.findIndex(nft => nft.id === nftId);
     const nftsCount = nftsList.length;
     const nftInfo = nftsList[currentNftIdx];
@@ -104,4 +104,4 @@ class NFTDetailPageRevamp extends Component<AllProps> {
     );
   }
 }
-export default (withRouter(NFTDetailPageRevamp): ComponentType<Props>);
+export default (withLocation(withParams(NFTDetailPageRevamp)): ComponentType<Props>);

packages/yoroi-extension/app/containers/wallet/TokenDetailPageRevamp.js

@@ -9,20 +9,19 @@ import {
   getTokenStrictName,
 } from '../../stores/stateless/tokenHelpers';
 import { splitAmount, truncateToken } from '../../utils/formatters';
-import type { Match } from 'react-router-dom';
-import { withRouter } from 'react-router-dom';
 import { Box } from '@mui/system';
 import TokenDetails from '../../components/wallet/assets/TokenDetails';
 import { getDescriptionFromTokenMetadata } from '../../utils/nftMetadata';
+import { withParams } from '../hooks';
 
 type Props = {|
   ...StoresAndActionsProps,
 |};
-type MatchProps = {|
-  match: Match,
+type ParamsProps = {|
+  params: any,
 |};
 
-type AllProps = {| ...Props, ...MatchProps |};
+type AllProps = {| ...Props, ...ParamsProps |};
 
 @observer
 class TokenDetailsPageRevamp extends Component<AllProps> {
@@ -64,7 +63,7 @@ class TokenDetailsPageRevamp extends Component<AllProps> {
               };
             });
 
-    const { tokenId } = this.props.match.params;
+    const { tokenId } = this.props.params;
     const tokenInfo = assetsList.find(token => token.id === tokenId);
     return (
       <Box
@@ -78,4 +77,4 @@ class TokenDetailsPageRevamp extends Component<AllProps> {
     );
   }
 }
-export default (withRouter(TokenDetailsPageRevamp): ComponentType<Props>);
+export default (withParams(TokenDetailsPageRevamp): ComponentType<Props>);

packages/yoroi-extension/app/stores/ada/AdaStateFetchStore.js

@@ -1,5 +1,5 @@
 // @flow
-import { observable } from 'mobx';
+import { override } from 'mobx';
 import BaseStateFetchStore from '../base/BaseStateFetchStore';
 import type { RequiredStores } from '../base/BaseStateFetchStore';
 
@@ -17,7 +17,7 @@ export default class AdaStateFetchStore<
   IFetcher
 > {
 
-  @observable fetcher: IFetcher;
+  @override fetcher: IFetcher;
 
   setup(): void {
     super.setup();

packages/yoroi-extension/app/stores/base/BaseStateFetchStore.js

@@ -13,10 +13,10 @@ export default class BaseStateFetchStore
   <
     TStores: RequiredStores,
     TActions,
-    IFetcher
+    TFetcher
   > extends Store<TStores, TActions> {
 
-  @observable fetcher: IFetcher;
+  @observable fetcher: TFetcher;
 
   setup(): void {
     super.setup();

packages/yoroi-extension/app/stores/toplevel/AddressesStore.js

@@ -67,10 +67,12 @@ export default class AddressesStore extends Store<StoresMap, ActionsMap> {
       const result = await this._baseCreateAddress(publicDeriver);
       if (result != null) {
         await this.refreshAddressesFromDb(publicDeriver);
-        runInAction('reset error', () => { this.error = null; });
+        const resetError = () => { this.error = null; };
+        runInAction(resetError);
       }
     } catch (error) {
-      runInAction('set error', () => { this.error = localizedError(error); });
+      const setError = () => { this.error = localizedError(error); };
+      runInAction(setError);
     }
   };
   _baseCreateAddress: PublicDeriver<> => Promise<?CreateAddressResponse> = async (

packages/yoroi-extension/app/stores/toplevel/ServerConnectionStore.js

@@ -37,7 +37,7 @@ export default class ServerConnectionStore extends Store<StoresMap, ActionsMap>
     const checkServerStatusFunc = stateFetcher.checkServerStatus;
     try {
       const response: ServerStatusResponse = await checkServerStatusFunc();
-      runInAction('refresh server status', () => {
+      const refreshServerStatus = () => {
         this.serverStatus = response.isServerOk === true
           ? ServerStatusErrors.Healthy
           : ServerStatusErrors.Server;
@@ -48,11 +48,13 @@ export default class ServerConnectionStore extends Store<StoresMap, ActionsMap>
           this.actions.serverConnection.parallelSyncStateChange.trigger();
         }
         this.serverTime = new Date(response.serverTime);
-      });
+      }
+      runInAction(refreshServerStatus);
     } catch (err) {
-      runInAction('refresh server status', () => {
+      const refreshServerStatusErr = () => {
         this.serverStatus = ServerStatusErrors.Network;
-      });
+      };
+      runInAction(refreshServerStatusErr);
     }
   }
 }

packages/yoroi-extension/app/stores/toplevel/WalletStore.js

@@ -325,14 +325,15 @@ export default class WalletStore extends Store<StoresMap, ActionsMap> {
     for (const publicDeriver of newWithCachedData) {
       this._queueWarningIfNeeded(publicDeriver);
     }
-    runInAction('refresh active wallet', () => {
+    const refreshActiveWallet = () => {
       if (this.selected == null && newWithCachedData.length === 1) {
         this.actions.wallets.setActiveWallet.trigger({
           wallet: newWithCachedData[0],
         });
       }
       this.publicDerivers.push(...newWithCachedData);
-    });
+    };
+    runInAction(refreshActiveWallet);
     setTimeout(async () => {
       await Promise.all(newWithCachedData
         .map(w => this.refreshWalletFromLocalOnLaunch(w)));