node modules latest versions update. (#105)

.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK = true

README.md

@@ -33,7 +33,7 @@ yarn
 export const config = {
     RPC_URL: 'https://rpc.flixnet.omniflix.network',
     REST_URL: 'https://rest.flixnet.omniflix.network',
-    EXPLORER_URL: 'https://explorer.omniflix.network',
+    EXPLORER_URL: 'https://www.mintscan.io/omniflix',
     STAKING_URL: 'https://flix.omniflix.co/stake',
     NETWORK_NAME: 'OmniFlix',
     NETWORK_TYPE: 'testnet',

config-overrides.js

@@ -0,0 +1,23 @@
+const webpack = require('webpack');
+
+module.exports = function override (config, env) {
+    config.resolve.fallback = {
+        stream: require.resolve('stream-browserify'),
+        crypto: require.resolve('crypto-browserify'),
+        process: require.resolve('process/browser'),
+        buffer: require.resolve('buffer'),
+    };
+    config.resolve.extensions = [...config.resolve.extensions, '.ts', '.js'];
+    config.plugins = [
+        ...config.plugins,
+        new webpack.ProvidePlugin({
+            Buffer: ['buffer', 'Buffer'],
+        }),
+        new webpack.ProvidePlugin({
+            process: 'process/browser',
+        }),
+    ];
+    config.ignoreWarnings = [/Failed to parse source map/];
+
+    return config;
+};

package.json

@@ -6,40 +6,49 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@cosmjs/amino": "^0.26.5",
-    "@cosmjs/proto-signing": "^0.26.5",
-    "@cosmjs/stargate": "^0.26.5",
-    "@cosmostation/cosmos-client": "^0.0.1",
+    "@cosmjs/amino": "0.32.2",
+    "@cosmjs/launchpad": "0.27.1",
+    "@cosmjs/proto-signing": "0.32.2",
+    "@cosmjs/stargate": "0.32.2",
+    "@cosmostation/cosmos-client": "0.0.5",
     "@cosmostation/extension-client": "^0.1.7",
+    "@emotion/react": "^11.11.3",
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
-    "classnames": "^2.2.6",
+    "buffer": "^6.0.3",
+    "classnames": "2.5.1",
+    "crypto-browserify": "^3.12.0",
     "history": "^5.0.0",
     "js-base64": "^3.6.0",
     "latest": "^0.2.0",
     "long": "^5.2.0",
-    "moment": "^2.29.1",
+    "moment": "2.30.1",
     "mui-datatables": "^3.7.7",
+    "process": "^0.11.10",
     "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dom": "^16.13.1",
-    "react-redux": "^7.2.0",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.0",
-    "redux": "^4.0.5",
+    "react": "18.2.0",
+    "react-app-rewired": "^2.2.1",
+    "react-dom": "18.2.0",
+    "react-redux": "9.1.0",
+    "react-router": "6.22.0",
+    "react-router-dom": "6.22.0",
+    "react-scripts": "5.0.1",
+    "redux": "5.0.1",
     "redux-devtools-extension": "^2.13.8",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^2.3.0",
+    "stream-browserify": "^3.0.0",
+    "typescript": "^5.3.3",
+    "web-vitals": "^3.5.2",
+    "webpack": "^5.89.0"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
+    "eject": "react-app-rewired eject"
   },
   "devDependencies": {
-    "@cosmjs/launchpad": "^0.26.5",
     "axios": "^0.21.1",
     "env-cmd": "^10.1.0",
     "eslint": "^6.8.0",
@@ -50,6 +59,12 @@
     "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-standard": "^4.0.1"
   },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",

src/Router.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import Home from './containers/Home';
 import Stake from './containers/Stake';
 import Proposals from './containers/Proposals';
@@ -23,19 +23,19 @@ const Router = () => {
     return (
         <div className="main_content">
             <div className="content_div scroll_bar">
-                <Switch>
+                <Routes>
                     {routes.map((route) =>
                         <Route
                             key={route.path}
                             exact
-                            component={route.component}
+                            element={<route.component/>}
                             path={route.path}/>,
                     )}
                     <Route
                         exact
-                        component={Home}
+                        element={<Home/>}
                         path="*"/>
-                </Switch>
+                </Routes>
             </div>
         </div>
     );

src/actions/stake.js

@@ -447,7 +447,7 @@ export const fetchAPR = () => (dispatch) => {
                     ? error.response.data.message
                     : error,
             ));
-            return process.exit(-1);
+            return null;
         }
     })();
 };

src/components/BackButton/index.js

@@ -3,7 +3,7 @@ import backIcon from '../../assets/back.png';
 import { IconButton } from '@material-ui/core';
 import * as PropTypes from 'prop-types';
 import './index.css';
-import { withRouter } from 'react-router-dom';
+import withRouter from '../WithRouter';
 
 const BackButton = (props) => {
     const onClick = () => {
@@ -13,7 +13,7 @@ const BackButton = (props) => {
             return;
         }
 
-        props.history.goBack();
+        props.router.navigate(-1);
     };
 
     return (
@@ -26,9 +26,9 @@ const BackButton = (props) => {
 };
 
 BackButton.propTypes = {
-    history: PropTypes.shape({
-        goBack: PropTypes.func.isRequired,
-    }).isRequired,
+    router: PropTypes.shape({
+        navigate: PropTypes.func.isRequired,
+    }),
     onClick: PropTypes.func,
 };
 

src/components/WithRouter.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+
+function withRouter (Component) {
+    function ComponentWithRouterProp (props) {
+        const location = useLocation();
+        const navigate = useNavigate();
+        const params = useParams();
+
+        return (
+            // eslint-disable-next-line react/react-in-jsx-scope
+            <Component
+                {...props}
+                router={{
+                    location,
+                    navigate,
+                    params,
+                }}/>
+        );
+    }
+
+    return ComponentWithRouterProp;
+}
+
+export default withRouter;

src/config.js

@@ -1,7 +1,7 @@
 export const config = {
     RPC_URL: 'https://rpc.omniflix.network',
     REST_URL: 'https://rest.omniflix.network',
-    EXPLORER_URL: 'https://explorer.omniflix.network',
+    EXPLORER_URL: 'https://www.mintscan.io/omniflix',
     STAKING_URL: 'https://flix.omniflix.co/stake',
     NETWORK_NAME: 'OmniFlix',
     NETWORK_TYPE: 'mainnet',

src/containers/Home/index.js

@@ -13,10 +13,10 @@ import Table from '../Stake/Table';
 import { Button } from '@material-ui/core';
 import Cards from '../Proposals/Cards';
 import ProposalDialog from '../Proposals/ProposalDialog';
-import { withRouter } from 'react-router';
 import { connect } from 'react-redux';
 import PendingDialog from '../Stake/DelegateDialog/PendingDialog';
 import MultiDelegateButton from '../Stake/MultiDelegateButton';
+import withRouter from '../../components/WithRouter';
 
 class Home extends Component {
     constructor (props) {
@@ -64,7 +64,7 @@ class Home extends Component {
     }
 
     handleRedirect (value) {
-        this.props.history.push(value);
+        this.props.router.navigate(value);
     }
 
     render () {
@@ -156,9 +156,6 @@ class Home extends Component {
 
 Home.propTypes = {
     delegatedValidatorList: PropTypes.array.isRequired,
-    history: PropTypes.shape({
-        push: PropTypes.func.isRequired,
-    }).isRequired,
     inActiveValidators: PropTypes.array.isRequired,
     lang: PropTypes.string.isRequired,
     open: PropTypes.bool.isRequired,
@@ -167,6 +164,9 @@ Home.propTypes = {
     voteDetailsInProgress: PropTypes.bool.isRequired,
     address: PropTypes.string,
     proposalsInProgress: PropTypes.bool,
+    router: PropTypes.shape({
+        navigate: PropTypes.func.isRequired,
+    }),
 };
 
 const stateToProps = (state) => {

src/containers/NavBar/ConnectDialog/CosmostationConnectButton.js

@@ -2,7 +2,6 @@ import { Button } from '@material-ui/core';
 import React, { useState } from 'react';
 import * as PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router';
 import {
     fetchRewards,
     fetchVestingBalance,
@@ -18,6 +17,7 @@ import { encode } from 'js-base64';
 import { hideConnectDialog } from '../../../actions/navBar';
 import { initializeCosmoStation } from '../../../helper';
 import variables from '../../../utils/variables';
+import withRouter from '../../../components/WithRouter';
 
 const CosmostationConnectButton = (props) => {
     const [inProgress, setInProgress] = useState(false);

src/containers/NavBar/DisconnectButton.js

@@ -3,8 +3,8 @@ import { Button } from '@material-ui/core';
 import * as PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import variables from '../../utils/variables';
-import { withRouter } from 'react-router';
 import { disconnectSet } from '../../actions/accounts';
+import withRouter from '../../components/WithRouter';
 
 const DisconnectButton = (props) => {
     const handleClick = () => {
@@ -25,10 +25,10 @@ const DisconnectButton = (props) => {
 
 DisconnectButton.propTypes = {
     disconnectSet: PropTypes.func.isRequired,
-    history: PropTypes.shape({
-        push: PropTypes.func.isRequired,
-    }).isRequired,
     lang: PropTypes.string.isRequired,
+    router: PropTypes.shape({
+        navigate: PropTypes.func.isRequired,
+    }),
 };
 
 const stateToProps = (state) => {

src/containers/NavBar/Tabs.js

@@ -3,9 +3,9 @@ import * as PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import variables from '../../utils/variables';
-import { withRouter } from 'react-router';
 import { hideSideBar } from '../../actions/navBar';
 import { hideProposalDialog } from '../../actions/proposals';
+import withRouter from '../../components/WithRouter';
 
 class Tabs extends Component {
     constructor (props) {
@@ -17,8 +17,8 @@ class Tabs extends Component {
     }
 
     componentDidMount () {
-        const route = this.props.location.pathname && this.props.location.pathname.split('/') &&
-            this.props.location.pathname.split('/')[1];
+        const route = this.props.router && this.props.router.location && this.props.router.location.pathname &&
+            this.props.router.location.pathname.split('/') && this.props.router.location.pathname.split('/')[1];
 
         if (this.state.value !== route && (route === '' || route === 'stake' || route === 'proposals')) {
             this.setState({
@@ -28,8 +28,9 @@ class Tabs extends Component {
     }
 
     componentDidUpdate (pp, ps, ss) {
-        if (pp.location.pathname !== this.props.location.pathname) {
-            const value = this.props.location.pathname.split('/')[1];
+        if (pp.router && pp.router.location && this.props.router && this.props.router.location &&
+            pp.router.location.pathname !== this.props.router.location.pathname) {
+            const value = this.props.router.location.pathname.split('/')[1];
 
             if (value !== this.state.value && (value === '' || value === 'stake' || value === 'proposals')) {
                 this.setState({
@@ -44,12 +45,12 @@ class Tabs extends Component {
         if (this.props.open) {
             this.props.hideProposalDialog();
         }
-        if ((newValue === this.state.value) && (this.props.match &&
-            this.props.match.params && !this.props.match.params.proposalID)) {
+        if ((newValue === this.state.value) && (this.props.router &&
+            this.props.router.params && !this.props.router.params.proposalID)) {
             return;
         }
 
-        this.props.history.push('/' + newValue);
+        this.props.router.navigate('/' + newValue);
         this.setState({
             value: newValue,
         });
@@ -93,18 +94,16 @@ class Tabs extends Component {
 Tabs.propTypes = {
     handleClose: PropTypes.func.isRequired,
     hideProposalDialog: PropTypes.func.isRequired,
-    history: PropTypes.shape({
-        push: PropTypes.func.isRequired,
-    }).isRequired,
     lang: PropTypes.string.isRequired,
-    location: PropTypes.shape({
-        pathname: PropTypes.string.isRequired,
-    }).isRequired,
     open: PropTypes.bool.isRequired,
-    match: PropTypes.shape({
+    router: PropTypes.shape({
+        location: PropTypes.shape({
+            pathname: PropTypes.string.isRequired,
+        }).isRequired,
+        navigate: PropTypes.func.isRequired,
         params: PropTypes.shape({
             proposalID: PropTypes.string,
-        }),
+        }).isRequired,
     }),
 };