fix: hook moved to parent component (#389)

Author: tuliomir

src/components/AddressDetailExplorer.js

@@ -10,7 +10,7 @@ import hathorLib from '@hathor/wallet-lib';
 import ReactLoading from 'react-loading';
 import { find } from 'lodash';
 import { useNavigate, useParams } from 'react-router-dom';
-import { useNewUiEnabled } from '../hooks';
+import { useIsMobile, useNewUiEnabled } from '../hooks';
 import AddressSummary from './AddressSummary';
 import AddressHistory from './AddressHistory';
 import Loading from './Loading';
@@ -65,6 +65,7 @@ function AddressDetailExplorer() {
   const { address } = useParams();
   const navigate = useNavigate();
   const newUiEnabled = useNewUiEnabled();
+  const isMobile = useIsMobile();
 
   /*
    * selectedToken {String} UID of the selected token when address has many
@@ -596,6 +597,7 @@ function AddressDetailExplorer() {
           calculatingPage={loadingPagination}
           loading={loadingHistory}
           newUiEnabled={newUiEnabled}
+          isMobile={isMobile}
         />
       </div>
     );

src/components/AddressHistory.js

@@ -16,7 +16,6 @@ import EllipsiCell from './EllipsiCell';
 import { ReactComponent as RowBottomIcon } from '../assets/images/leading-icon.svg';
 import { ReactComponent as RowTopIcon } from '../assets/images/leading-top-icon.svg';
 import { COLORS } from '../constants';
-import { useIsMobile } from '../hooks';
 
 const mapStateToProps = state => ({
   decimalPlaces: state.serverInfo.decimal_places,
@@ -174,8 +173,7 @@ class AddressHistory extends SortableTable {
     });
   }
 
-  renderNewTableBodyUi() {
-    const isMobile = useIsMobile();
+  renderNewTableBodyUi(isMobile) {
     const ellipsisCount = isMobile ? 4 : 12;
     return this.props.data.map(tx => {
       let statusElement = '';
@@ -244,7 +242,9 @@ class AddressHistory extends SortableTable {
   }
 
   renderTableBody() {
-    return this.props.newUiEnabled ? this.renderNewTableBodyUi() : this.renderTableBodyUi();
+    return this.props.newUiEnabled
+      ? this.renderNewTableBodyUi(this.props.isMobile)
+      : this.renderTableBodyUi();
   }
 }
 
@@ -265,6 +265,8 @@ AddressHistory.propTypes = {
   selectedToken: PropTypes.string.isRequired,
   numTransactions: PropTypes.number.isRequired,
   txCache: PropTypes.object.isRequired,
+  newUiEnabled: PropTypes.bool.isRequired,
+  isMobile: PropTypes.bool.isRequired,
 };
 
 export default connect(mapStateToProps)(AddressHistory);