Add react-media package to prevent rendering wallet-view twice in the popup view

2 files changed, 6 insertions, 1 deletions

diff --git a/package.json b/package.json
index f642a20c6..a75bea0f7 100644
--- a/package.json
+++ b/package.json
@@ -189,6 +189,7 @@
     "react-dom": "^15.6.2",
     "react-hyperscript": "^3.0.0",
     "react-markdown": "^3.0.0",
+    "react-media": "^1.8.0",
     "react-redux": "^5.0.5",
     "react-router-dom": "^4.2.2",
     "react-select": "^1.0.0",
diff --git a/ui/app/components/pages/home/home.component.js b/ui/app/components/pages/home/home.component.js
index 0ab6f77f8..20ba44484 100644
--- a/ui/app/components/pages/home/home.component.js
+++ b/ui/app/components/pages/home/home.component.js
@@ -1,5 +1,6 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
+import Media from 'react-media'
 import { Redirect } from 'react-router-dom'
 import WalletView from '../../wallet-view'
 import TxView from '../../tx-view'
@@ -64,7 +65,10 @@ export default class Home extends PureComponent {
     return (
       <div className="main-container">
         <div className="account-and-transaction-details">
-          <WalletView responsiveDisplayClassname="lap-visible" />
+          <Media
+            query="(min-width: 576px)"
+            render={() => <WalletView />}
+          />
           <TxView />
         </div>
       </div>