Refactor: Removes HathorWallet from Redux store (#580)

* chore: new GlobalWallet object

* chore: refactors globalWallet on selectors

* chore: refactors globalWallet on mapStateToProps

* chore: refactors globalWallet on saga selectors

* fix: adjusts tokens utils store reader

* refactor: singleton filename

* refactor: removes globalwallet from local states

* fix: indentation

* refactor: services to modules folder

* style: lint

src/App.js

@@ -51,23 +51,23 @@ import EditSwap from './screens/atomic-swap/EditSwap';
 import NewSwap from './screens/atomic-swap/NewSwap';
 import ImportExisting from './screens/atomic-swap/ImportExisting';
 import LOCAL_STORE from './storage';
+import { getGlobalWallet } from "./modules/wallet";
 
 function Root() {
   const {
     ledgerClosed,
     walletStartState,
     isVersionAllowed,
-    wallet,
     navigateTo,
   } = useSelector((state) => {
     return {
       ledgerClosed: state.ledgerWasClosed,
       walletStartState: state.walletStartState,
       isVersionAllowed: state.isVersionAllowed,
-      wallet: state.wallet,
       navigateTo: state.navigateTo,
     };
   });
+  const wallet = getGlobalWallet();
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const context = useContext(GlobalModalContext);

src/actions/index.js

@@ -142,16 +142,6 @@ export const updateRequestErrorStatusCode = data => ({ type: 'update_request_err
  */
 export const updateHeight = (height, htrUpdatedBalance) => ({ type: 'update_height', payload: { height, htrUpdatedBalance } });
 
-/**
- * wallet {HathorWallet} wallet object
- */
-export const setWallet = (wallet) => ({ type: 'set_wallet', payload: wallet });
-
-/**
- * Stop and clean wallet redux state
- */
-export const resetWallet = () => ({ type: 'reset_wallet' });
-
 /**
  * tokens {Array} array of token uids the the wallet has
  * currentAddress {Object} The current unused address

src/components/ModalAddManyTokens.js

@@ -10,14 +10,9 @@ import { t } from 'ttag';
 import { get } from 'lodash';
 import $ from 'jquery';
 import hathorLib from '@hathor/wallet-lib';
-import { connect } from 'react-redux';
 import tokens from '../utils/tokens';
-import wallet from "../utils/wallet";
-
-
-const mapStateToProps = (state) => {
-  return { storage: state.wallet.storage };
-};
+import walletUtils from "../utils/wallet";
+import { getGlobalWallet } from "../modules/wallet";
 
 /**
  * Component that shows a modal to add many unknown tokens to the wallet (bulk import)
@@ -105,14 +100,15 @@ class ModalAddManyTokens extends React.Component {
       // Preventing when the user forgets a comma in the end
       if (config !== '') {
         // Getting all validation promises
-        validations.push(hathorLib.tokensUtils.validateTokenToAddByConfigurationString(config, this.props.storage));
+        const storage = getGlobalWallet().storage;
+        validations.push(hathorLib.tokensUtils.validateTokenToAddByConfigurationString(config, storage));
       }
     }
 
     try {
       const toAdd = await Promise.all(validations)
       const tokensBalance = this.props.tokensBalance;
-      const areZeroBalanceTokensHidden = wallet.areZeroBalanceTokensHidden();
+      const areZeroBalanceTokensHidden = walletUtils.areZeroBalanceTokensHidden();
       const tokensWithoutBalance = [];
       const tokensToAdd = [];
 
@@ -163,7 +159,7 @@ class ModalAddManyTokens extends React.Component {
       // Adding the tokens to the wallet and returning with the success callback
       for (const config of tokensToAdd) {
         await tokens.addToken(config.uid, config.name, config.symbol);
-        wallet.setTokenAlwaysShow(config.uid, this.state.alwaysShow);
+        walletUtils.setTokenAlwaysShow(config.uid, this.state.alwaysShow);
       }
 
       this.props.success(toAdd.length);
@@ -240,4 +236,4 @@ class ModalAddManyTokens extends React.Component {
   }
 }
 
-export default connect(mapStateToProps)(ModalAddManyTokens);
+export default ModalAddManyTokens;

src/components/ModalAddToken.js

@@ -10,13 +10,8 @@ import { t } from 'ttag';
 import $ from 'jquery';
 import tokens from '../utils/tokens';
 import hathorLib from '@hathor/wallet-lib';
-import { connect } from 'react-redux';
-import wallet from "../utils/wallet";
-
-
-const mapStateToProps = (state) => {
-  return { storage: state.wallet.storage };
-};
+import walletUtils from '../utils/wallet';
+import { getGlobalWallet } from '../modules/wallet';
 
 /**
  * Component that shows a modal to add one specific unknown token to the wallet
@@ -88,7 +83,8 @@ class ModalAddToken extends React.Component {
     }
 
     try {
-      const tokenData = await hathorLib.tokensUtils.validateTokenToAddByConfigurationString(this.refs.config.value, this.props.storage);
+      const { storage } = getGlobalWallet();
+      const tokenData = await hathorLib.tokensUtils.validateTokenToAddByConfigurationString(this.refs.config.value, storage);
       const tokensBalance = this.props.tokensBalance;
 
       const tokenUid = tokenData.uid;
@@ -102,7 +98,7 @@ class ModalAddToken extends React.Component {
        * checkbox value as the user decision already.
        */
       if (
-        wallet.areZeroBalanceTokensHidden()
+        walletUtils.areZeroBalanceTokensHidden()
         && tokenHasZeroBalance
         && !this.state.shouldExhibitAlwaysShowCheckbox
       ) {
@@ -115,7 +111,7 @@ class ModalAddToken extends React.Component {
 
       // Adding the token to the wallet and returning with the success callback
       tokens.addToken(tokenUid, tokenData.name, tokenData.symbol);
-      wallet.setTokenAlwaysShow(tokenUid, this.state.alwaysShow);
+      walletUtils.setTokenAlwaysShow(tokenUid, this.state.alwaysShow);
 
       this.props.success();
     } catch (e) {
@@ -195,4 +191,4 @@ class ModalAddToken extends React.Component {
   }
 }
 
-export default connect(mapStateToProps)(ModalAddToken);
+export default ModalAddToken;

src/components/ModalBackupWords.js

@@ -14,6 +14,7 @@ import { updateWords } from '../actions/index';
 import { connect } from 'react-redux';
 import hathorLib from '@hathor/wallet-lib';
 import { WORDS_VALIDATION } from '../constants';
+import { getGlobalWallet } from '../modules/wallet';
 
 
 const mapDispatchToProps = dispatch => {
@@ -26,7 +27,6 @@ const mapDispatchToProps = dispatch => {
 const mapStateToProps = (state) => {
   return {
     words: state.words,
-    wallet: state.wallet,
   };
 };
 
@@ -108,7 +108,8 @@ class ModalBackupWords extends React.Component {
       this.setState({ passwordFormValidated: false });
       const password = this.refs.password.value;
       try {
-        const accessData = await this.props.wallet.storage.getAccessData();
+        const { storage } = getGlobalWallet();
+        const accessData = await storage.getAccessData();
         const words = hathorLib.cryptoUtils.decryptData(accessData.words, password);
         this.props.updateWords(words);
         this.setState({ passwordSuccess: true, errorMessage: '' });

src/components/ModalPin.js

@@ -9,15 +9,8 @@ import React from 'react';
 import { t } from 'ttag';
 import $ from 'jquery';
 import PinInput from './PinInput';
-import { connect } from 'react-redux';
 import PropTypes from "prop-types";
-
-
-const mapStateToProps = (state) => {
-  return {
-    wallet: state.wallet,
-  };
-};
+import { getGlobalWallet } from "../modules/wallet";
 
 /**
  * Component that shows a modal with a form to ask for the user PIN
@@ -78,7 +71,8 @@ export class ModalPin extends React.Component {
     const pin = this.refs.pinInput.refs.pin.value;
 
     // Incorrect PIN, show error message and do nothing else
-    if (!await this.props.wallet.checkPin(pin)) {
+    const wallet = getGlobalWallet();
+    if (!await wallet.checkPin(pin)) {
       this.setState({ errorMessage: t`Invalid PIN` })
       return;
     }
@@ -136,7 +130,7 @@ export class ModalPin extends React.Component {
   }
 }
 
-export default connect(mapStateToProps)(ModalPin);
+export default ModalPin;
 
 
 ModalPin.propTypes = {

src/components/ModalResetAllData.js

@@ -9,16 +9,9 @@ import React from 'react';
 import { t } from 'ttag';
 import $ from 'jquery';
 import { CONFIRM_RESET_MESSAGE } from '../constants';
-import { connect } from 'react-redux';
 import SpanFmt from './SpanFmt';
 import LOCAL_STORE from '../storage';
-
-
-const mapStateToProps = (state) => {
-  return {
-    wallet: state.wallet,
-  };
-};
+import { getGlobalWallet } from '../modules/wallet';
 
 /**
  * Component that shows a modal to ask form confirmation data to reset the wallet
@@ -75,8 +68,9 @@ class ModalResetAllData extends React.Component {
     }
 
     if (!forgotPassword) {
-      // Password was informed and it is incorrect
-      const correctPassword = await this.props.wallet.checkPassword(password);
+      // Password was informed and it is incorr
+      const wallet = getGlobalWallet();
+      const correctPassword = await wallet.checkPassword(password);
       if (password && !correctPassword) {
         this.setState({errorMessage: t`Invalid password`})
         return
@@ -176,4 +170,4 @@ class ModalResetAllData extends React.Component {
   }
 }
 
-export default connect(mapStateToProps)(ModalResetAllData);
+export default ModalResetAllData;

src/components/ModalSendTx.js

@@ -13,11 +13,11 @@ import PropTypes from "prop-types";
 import SendTxHandler from '../components/SendTxHandler';
 import ReactLoading from 'react-loading';
 import { colors } from '../constants';
+import { getGlobalWallet } from '../modules/wallet';
 
 
 const mapStateToProps = (state) => {
   return {
-    wallet: state.wallet,
     useWalletService: state.useWalletService,
   };
 };
@@ -81,7 +81,8 @@ export class ModalSendTx extends React.Component {
     // If we are using the wallet service facade, we should avail of the validated PIN
     // to renew the auth token.
     if (this.props.useWalletService) {
-      await this.props.wallet.validateAndRenewAuthToken(pin);
+      const wallet = getGlobalWallet();
+      await wallet.validateAndRenewAuthToken(pin);
     }
 
     const preparedTx = await this.props.prepareSendTransaction(pin);

src/components/ModalUnregisteredTokenInfo.js

@@ -12,12 +12,8 @@ import tokens from '../utils/tokens';
 import SpanFmt from './SpanFmt';
 import TokenGeneralInfo from '../components/TokenGeneralInfo';
 import hathorLib from '@hathor/wallet-lib';
-import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-
-const mapStateToProps = (state) => {
-  return { storage: state.wallet.storage };
-};
+import { getGlobalWallet } from '../modules/wallet';
 
 /**
  * Component that shows a modal with information about an unregistered token
@@ -67,7 +63,8 @@ class ModalUnregisteredTokenInfo extends React.Component {
       );
 
       try {
-        const tokenData = await hathorLib.tokensUtils.validateTokenToAddByConfigurationString(configurationString, this.props.storage);
+        const storage = getGlobalWallet().storage;
+        const tokenData = await hathorLib.tokensUtils.validateTokenToAddByConfigurationString(configurationString, storage);
         await tokens.addToken(tokenData.uid, tokenData.name, tokenData.symbol);
         $('#unregisteredTokenInfoModal').modal('hide');
         this.props.tokenRegistered(this.props.token);
@@ -158,4 +155,4 @@ ModalUnregisteredTokenInfo.propTypes = {
   totalSupply: PropTypes.number,
 };
 
-export default connect(mapStateToProps)(ModalUnregisteredTokenInfo);
+export default ModalUnregisteredTokenInfo;

src/components/OutputsWrapper.js

@@ -9,18 +9,10 @@ import React from 'react';
 import { t } from 'ttag';
 import $ from 'jquery';
 import _ from 'lodash';
-import { connect } from 'react-redux';
 import hathorLib from '@hathor/wallet-lib';
 import InputNumber from './InputNumber';
 import LOCAL_STORE from '../storage';
 
-
-const mapStateToProps = (state) => {
-  return {
-    wallet: state.wallet,
-  };
-};
-
 /**
  * Component that wraps the outputs of a token in the Send Tokens screen
  *
@@ -85,4 +77,4 @@ class OutputsWrapper extends React.Component {
   }
 }
 
-export default connect(mapStateToProps)(OutputsWrapper);
+export default OutputsWrapper;

src/components/TokenHistory.js

@@ -13,12 +13,13 @@ import { Link } from 'react-router-dom'
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { connect } from 'react-redux';
 import { get } from 'lodash';
-import wallet from '../utils/wallet';
+import walletUtils from '../utils/wallet';
 import helpers from '../utils/helpers';
 import { colors } from '../constants';
 import TokenPagination from './TokenPagination';
 import HathorAlert from './HathorAlert';
 import { TOKEN_DOWNLOAD_STATUS } from '../sagas/tokens';
+import { getGlobalWallet } from "../modules/wallet";
 
 const mapStateToProps = (state, props) => {
   const defaultTokenHistory = {
@@ -32,7 +33,6 @@ const mapStateToProps = (state, props) => {
 
   return {
     tokenHistory: history,
-    wallet: state.wallet,
     tokenMetadata: state.tokenMetadata,
   };
 };
@@ -85,8 +85,8 @@ class TokenHistory extends React.Component {
    */
   fetchMoreHistory = async () => {
     if (this.state.shouldFetch) {
-      const newHistory = await wallet.fetchMoreHistory(
-        this.props.wallet,
+      const newHistory = await walletUtils.fetchMoreHistory(
+        getGlobalWallet(),
         this.props.selectedToken,
         this.props.tokenHistory.data
       );