From d45956b2b7ba1fb8641672353a3fa0ac2d7569c7 Mon Sep 17 00:00:00 2001
From: Erik Marks <rekmarks@protonmail.com>
Date: Thu, 30 Apr 2020 15:44:12 -0700
Subject: [PATCH] add connected sites popovers render methods

---
 package.json                                  |   2 +-
 .../connected-sites.component.js              | 103 +++++++++++-------
 .../connected-sites.container.js              |   6 +-
 3 files changed, 68 insertions(+), 43 deletions(-)

diff --git a/package.json b/package.json
index 717e60755..4da42d065 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "ganache:start": "./development/run-ganache",
     "sentry:publish": "node ./development/sentry-publish.js",
     "lint": "eslint . --ext js,json",
-    "lint:fix": "eslint . --ext js,json --fix",
+    "lint:fix": "eslint --ext js,json --fix",
     "lint:changed": "{ git ls-files --others --exclude-standard ; git diff-index --name-only --diff-filter=d HEAD ; } | grep --regexp='[.]js$' --regexp='[.]json$' | tr '\\n' '\\0' | xargs -0 eslint",
     "lint:changed:fix": "{ git ls-files --others --exclude-standard ; git diff-index --name-only --diff-filter=d HEAD ; } | grep --regexp='[.]js$' --regexp='[.]json$' | tr '\\n' '\\0' | xargs -0 eslint --fix",
     "lint:shellcheck": "./development/shellcheck.sh",
diff --git a/ui/app/pages/connected-sites/connected-sites.component.js b/ui/app/pages/connected-sites/connected-sites.component.js
index b8a1238c6..6323f49a8 100644
--- a/ui/app/pages/connected-sites/connected-sites.component.js
+++ b/ui/app/pages/connected-sites/connected-sites.component.js
@@ -55,7 +55,7 @@ export default class ConnectSites extends Component {
     this.clearSitePendingDisconnect()
   }
 
-  renderConnectedSites () {
+  renderConnectedSitesList () {
     return (
       <ConnectedSitesList
         connectedDomains={this.props.connectedDomains}
@@ -64,50 +64,71 @@ export default class ConnectSites extends Component {
     )
   }
 
-  render () {
-    const { accountLabel, closePopover, connectedDomains, legacyExposeAccount, tabToConnect } = this.props
+  renderConnectedSitesPopover () {
+
+    const {
+      accountLabel,
+      closePopover,
+      connectedDomains,
+      legacyExposeAccount,
+      tabToConnect,
+    } = this.props
     const { t } = this.context
+
+    return (
+      <Popover
+        title={t('connectedSites')}
+        subtitle={connectedDomains.length
+          ? t('connectedSitesDescription', [accountLabel])
+          : t('connectedSitesEmptyDescription', [accountLabel])
+        }
+        onClose={closePopover}
+        footer={
+          tabToConnect
+            ? (
+              <a onClick={legacyExposeAccount}>{ t('connectManually') }</a>
+            )
+            : null
+        }
+        footerClassName="connected-sites__add-site-manually"
+      >
+        {this.renderConnectedSitesList()}
+      </Popover>
+    )
+  }
+
+  renderDisconnectSitePopover () {
+
+    const { closePopover } = this.props
+    const { t } = this.context
+    const { sitePendingDisconnect } = this.state
+
+    return (
+      <Popover
+        title={t('disconnectSite', [sitePendingDisconnect.domainName])}
+        subtitle={t('disconnectSiteConfirmationDescription')}
+        onClose={closePopover}
+        footer={(
+          <>
+            <Button type="secondary" onClick={this.clearSitePendingDisconnect}>
+              { t('cancel') }
+            </Button>
+            <Button type="primary" onClick={this.disconnect}>
+              { t('disconnect') }
+            </Button>
+          </>
+        )}
+        footerClassName="connected-sites__confirmation"
+      />
+    )
+  }
+
+  render () {
     const { sitePendingDisconnect } = this.state
     return (
       sitePendingDisconnect
-        ? (
-          <Popover
-            title={t('disconnectSite', [sitePendingDisconnect.domainName])}
-            subtitle={t('disconnectSiteConfirmationDescription')}
-            onClose={closePopover}
-            footer={(
-              <>
-                <Button type="secondary" onClick={this.clearSitePendingDisconnect}>
-                  { t('cancel') }
-                </Button>
-                <Button type="primary" onClick={this.disconnect}>
-                  { t('disconnect') }
-                </Button>
-              </>
-            )}
-            footerClassName="connected-sites__confirmation"
-          />
-        )
-        : (
-          <Popover
-            title={t('connectedSites')}
-            subtitle={connectedDomains.length
-              ? t('connectedSitesDescription', [accountLabel])
-              : t('connectedSitesEmptyDescription', [accountLabel])
-            }
-            onClose={closePopover}
-            footer={
-              tabToConnect
-                ? (
-                  <a onClick={legacyExposeAccount}>{ t('connectManually') }</a>
-                )
-                : null
-            }
-            footerClassName="connected-sites__add-site-manually"
-          >
-            {this.renderConnectedSites()}
-          </Popover>
-        )
+        ? this.renderDisconnectSitePopover()
+        : this.renderConnectedSitesPopover()
     )
   }
 }
diff --git a/ui/app/pages/connected-sites/connected-sites.container.js b/ui/app/pages/connected-sites/connected-sites.container.js
index e3ef233f8..ee631886b 100644
--- a/ui/app/pages/connected-sites/connected-sites.container.js
+++ b/ui/app/pages/connected-sites/connected-sites.container.js
@@ -1,6 +1,10 @@
 import { connect } from 'react-redux'
 import ConnectedSites from './connected-sites.component'
-import { getOpenMetamaskTabsIds, legacyExposeAccounts, removePermissionsFor } from '../../store/actions'
+import {
+  getOpenMetamaskTabsIds,
+  legacyExposeAccounts,
+  removePermissionsFor,
+} from '../../store/actions'
 import {
   getConnectedDomainsForSelectedAddress,
   getCurrentAccountWithSendEtherInfo,