Update dependencies

app/background/analytics/service.js

@@ -1,5 +1,5 @@
 import mixpanel from 'mixpanel';
-import uuid from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 import { del, get, put } from '../db/service';
 import * as os from 'os';
 import isDev from '../../utils/isDev';
@@ -21,7 +21,7 @@ export async function setOptIn(state) {
     return;
   }
 
-  const u = uuid.v4();
+  const u = uuidv4();
   await put(USER_ID_KEY, u);
   await put(OPT_IN_STATE_KEY, '1');
   userId = u;

app/components/IdleModal/index.js

@@ -21,19 +21,19 @@ class IdleModal extends Component {
     timeRemaining: 60,
   };
 
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.isLocked && this.state.isShowing) {
+  componentDidUpdate(prevProps) {
+    if (this.props.isLocked && this.state.isShowing) {
       this.close();
       return;
     }
 
-    if (this.props.maxIdle === 0) {
+    if (prevProps.maxIdle === 0) {
       return;
     }
 
     if (
-      !nextProps.isLocked &&
-      nextProps.idle >= this.props.maxIdle &&
+      !this.props.isLocked &&
+      this.props.idle >= prevProps.maxIdle &&
       !this.state.isShowing
     ) {
       if (!this.interval) {

app/components/NameClaimModal/index.js

@@ -70,7 +70,7 @@ export default class NameClaimModal extends Component {
     success: null,
   };
 
-  async componentWillMount() {
+  async componentDidMount() {
     if (this.props.name) {
       this.getClaim(this.props.name, null);
     }
@@ -743,7 +743,7 @@ class ClaimOption extends Component {
 
     const faketxt = (!!url && !!txt)
         ? `${url} 300 IN TXT "${txt}"`
-        : ''; 
+        : '';
     const fakesig = (!!url && !!txt)
         ? `${url} 300 IN RRSIG TXT 13 2 300 20210603180907 20210601160907 34505 ${url} f6x5CBP1ySenfPodSGSPNPCdzLzhlXK8shtpfzcEmCs09amCSqCIwniq eEIR1EYCuijP4OCKFyEnEhfEk+l81A==`
         : '';

app/components/Notification/notification.scss

@@ -9,7 +9,7 @@
   z-index: 50;
   left: 50%;
   top: 0;
-  margin-left: -($width / 2);
+  margin-left: calc($width / -2);
   transform: translateY(calc(-100% - 8px));
   transition: transform 250ms linear;
   background: rgba($athens-gray, .8);

app/components/Records/EditableRecord.js

@@ -26,12 +26,12 @@ class EditableRecord extends Component {
     };
   }
 
-  componentWillReceiveProps(props) {
-    const {type} = props.record || {};
+  componentDidUpdate() {
+    const {type} = this.props.record || {};
     const currentTypeIndex = DROPDOWN_TYPES.findIndex(d => d.label === type);
     this.setState({
       isEditing: false,
-      value: serializeRecord(props.record),
+      value: serializeRecord(this.props.record),
       errorMessage: '',
       currentTypeIndex: Math.max(currentTypeIndex, 0),
     });

app/components/SendModal/index.js

@@ -168,7 +168,7 @@ class SendModal extends Component {
     // }
   }
 
-  componentWillMount = () => {
+  componentDidMount = () => {
     document.addEventListener('keydown', this.handleEscape)
   }
 

app/components/Sidebar/index.js

@@ -76,62 +76,54 @@ class Sidebar extends Component {
         <div className="sidebar__section">{title}</div>
         <div className="sidebar__actions">
           <NavLink
-            className="sidebar__action"
             to="/account"
-            activeClassName="sidebar__action--selected"
+            className={isActive => `sidebar__action ${isActive ? "sidebar__action--selected" : ''}`}
           >
             {t('headingPortfolio')}
           </NavLink>
           <NavLink
-            className="sidebar__action"
             to="/send"
-            activeClassName="sidebar__action--selected"
+            className={isActive => `sidebar__action ${isActive ? "sidebar__action--selected" : ''}`}
           >
             {t('headingSend')}
           </NavLink>
           <NavLink
-            className="sidebar__action"
             to="/receive"
-            activeClassName="sidebar__action--selected"
+            className={isActive => `sidebar__action ${isActive ? "sidebar__action--selected" : ''}`}
           >
             {t('headingReceive')}
           </NavLink>
 
           <NavLink
-            className="sidebar__action"
             to="/domain_manager"
-            activeClassName="sidebar__action--selected"
+            className={isActive => `sidebar__action ${isActive ? "sidebar__action--selected" : ''}`}
           >
             {t('headingDomainManager')}
           </NavLink>
         </div>
         <div className="sidebar__section">{t('topLevelDomains')}</div>
         <div className="sidebar__actions">
           <NavLink
-            className="sidebar__action"
             to="/domains"
-            activeClassName="sidebar__action--selected"
+            className={isActive => `sidebar__action ${isActive ? "sidebar__action--selected" : ''}`}
           >
             {t('headingBrowseDomains')}
           </NavLink>
           <NavLink
-            className="sidebar__action"
             to="/bids"
-            activeClassName="sidebar__action--selected"
+            className={isActive => `sidebar__action ${isActive ? "sidebar__action--selected" : ''}`}
           >
             {t('headingYourBids')}
           </NavLink>
           <NavLink
-            className="sidebar__action"
             to="/watching"
-            activeClassName="sidebar__action--selected"
+            className={isActive => `sidebar__action ${isActive ? "sidebar__action--selected" : ''}`}
           >
             {t('headingWatching')}
           </NavLink>
           <NavLink
-            className="sidebar__action"
             to="/exchange"
-            activeClassName="sidebar__action--selected"
+            className={isActive => `sidebar__action ${isActive ? "sidebar__action--selected" : ''}`}
           >
             {t('headingExchange')}
           </NavLink>
@@ -154,23 +146,20 @@ class Sidebar extends Component {
         </div>
         <div className="sidebar__actions">
           <NavLink
-            className="sidebar__action"
             to="/get_coins"
-            activeClassName="sidebar__action--selected"
+            className={isActive => `sidebar__action ${isActive ? "sidebar__action--selected" : ''}`}
           >
             {t('headingClaimAirdropName')}
           </NavLink>
           <NavLink
-            className="sidebar__action"
             to="/sign_message"
-            activeClassName="sidebar__action--selected"
+            className={isActive => `sidebar__action ${isActive ? "sidebar__action--selected" : ''}`}
           >
             {t('headingSignMessage')}
           </NavLink>
           <NavLink
-            className="sidebar__action"
             to="/verify_message"
-            activeClassName="sidebar__action--selected"
+            className={isActive => `sidebar__action ${isActive ? "sidebar__action--selected" : ''}`}
           >
             {t('headingVerifyMessage')}
           </NavLink>

app/components/SplashScreen/index.js

@@ -27,7 +27,7 @@ class SplashScreen extends Component {
     hasMigrated400: false,
   };
 
-  async componentWillMount() {
+  async componentDidMount() {
     // TODO: `network` is ALWAYS 'main' here. I think that is because
     // this code runs before any of the background stuff has a chance
     // to update state with user's actual configuration. This is only an

app/components/Transactions/index.js

@@ -52,7 +52,7 @@ export default class Transactions extends Component {
 
   static contextType = I18nContext;
 
-  async componentWillMount() {
+  async componentDidMount() {
     const itemsPerPage = await dbClient.get(TX_VIEW_ITEMS_PER_PAGE_KEY);
 
     this.setState({
@@ -70,10 +70,8 @@ export default class Transactions extends Component {
     if (this.props.height !== prevProps.height) {
       this.refreshTransactions();
     }
-  }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.transactions.size !== nextProps.transactions.size) {
+    if (this.props.transactions.size !== prevProps.transactions.size) {
       this.fuse = null;
     }
   }

app/index.js

@@ -4,7 +4,7 @@ require('./sentry');
 
 import React from 'react';
 import { render } from 'react-dom';
-import { AppContainer } from 'react-hot-loader';
+import { AppContainer, setConfig as rhlSetConfig } from 'react-hot-loader';
 import Root from './pages/Root';
 import { history, store } from './store/configureStore';
 import './global.scss';
@@ -36,6 +36,10 @@ history.listen(location => {
   }
 });
 
+rhlSetConfig({
+  showReactDomPatchNotification: false,
+})
+
 render(
   <AppContainer>
     <Root store={store} history={history} />

app/pages/Auction/index.js

@@ -89,7 +89,7 @@ export default class Auction extends Component {
 
   static contextType = I18nContext;
 
-  async componentWillMount() {
+  async componentDidMount() {
     try {
       this.setState({isLoading: true});
       await this.props.getNameInfo(this.getDomain());

app/pages/DomainManager/index.js

@@ -70,7 +70,7 @@ class DomainManager extends Component {
     analytics.screenView('Domain Manager');
   }
 
-  async componentWillMount() {
+  async componentDidMount() {
     this.props.getMyNames();
     const itemsPerPage = await dbClient.get(DM_ITEMS_PER_PAGE_KEY);
 

app/pages/MyDomain/index.js

@@ -35,7 +35,7 @@ class MyDomain extends Component {
 
   static contextType = I18nContext;
 
-  async componentWillMount() {
+  async componentDidMount() {
     await this.props.getNameInfo();
     await this.props.fetchPendingTransactions();
   }

app/pages/Watching/index.js

@@ -54,7 +54,7 @@ class Watching extends Component {
     isImporting: false,
   };
 
-  async componentWillMount() {
+  async componentDidMount() {
     const itemsPerPage = await dbClient.get(WATCHING_ITEMS_PER_PAGE_KEY);
 
     this.setState({

babel.config.json

@@ -4,7 +4,7 @@
       "@babel/env",
       {
         "targets": {
-          "electron": "16.0.6"
+          "electron": "19.0.7"
         },
         "debug": true
       }

configs/webpack.config.test.babel.js

@@ -4,6 +4,9 @@ const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
 
 const path = require('path');
 
+const port = process.env.PORT || 1212;
+const publicPath = `http://localhost:${port}/dist`;
+
 module.exports = {
   devtool: 'inline-source-map',
 
@@ -13,6 +16,7 @@ module.exports = {
     './unit.js',
   ],
   output: {
+    publicPath: publicPath,
     path: path.resolve(__dirname, '../test-dist'),
     filename: 'test.js'
   },