[FIX] MM Dropdown bug (#634)

* [FIX] MM Dropdown bug

* i18n: change text when not connected

* fix: Pr comments

* fix: show metamask links only for mm wallets

* fix mm portfolio page for non mm extension wallets (#650)

* chore: delete sdk file

---------

Co-authored-by: Flavio F Lima <flavioislima@users.noreply.github.com>
Co-authored-by: Brett <27568879+BrettCleary@users.noreply.github.com>

Author: flavioislima

public/locales/en/translation.json

@@ -310,6 +310,7 @@
             "noThanks": "No Thanks"
         },
         "changeWallet": "Change wallet",
+        "connectWallet": "Connect wallet",
         "copyUrl": "Copy URL",
         "currentWallet": "Current wallet",
         "discordApp": "Discord",

src/frontend/components/UI/AccountDropdown/index.tsx

@@ -1,40 +1,46 @@
 import { Menu } from '@mantine/core'
-import React, { useContext } from 'react'
+import React from 'react'
+import walletState from 'frontend/state/WalletState'
+import { observer } from 'mobx-react-lite'
+
 import Wallet from 'frontend/components/UI/Wallet'
 import styles from './index.module.scss'
 import { NavLink } from 'react-router-dom'
 import onboardingStore from 'frontend/store/OnboardingStore'
 import { useTranslation } from 'react-i18next'
-import ContextProvider from 'frontend/state/ContextProvider'
+import { PROVIDERS } from 'common/types/proxy-types'
 
-function NavigationMenuItem({ label, to }: { label: string; to: string }) {
-  const { showMetaMaskBrowserSidebarLinks } = useContext(ContextProvider)
+function NavigationMenuItem({
+  label,
+  to,
+  showMetaMaskExtensionLinks
+}: {
+  label: string
+  to: string
+  showMetaMaskExtensionLinks: boolean
+}) {
   return (
     <Menu.Item
       className={styles.menuItem}
-      id={
-        showMetaMaskBrowserSidebarLinks
-          ? 'topMenuItemWalletDropdown'
-          : undefined
-      }
+      id={showMetaMaskExtensionLinks ? 'topMenuItemWalletDropdown' : undefined}
     >
       <NavLink
         to={to}
-        id={
-          showMetaMaskBrowserSidebarLinks
-            ? 'topElementWalletDropdown'
-            : undefined
-        }
+        id={showMetaMaskExtensionLinks ? 'topElementWalletDropdown' : undefined}
       >
         <div className={`body ${styles.itemContents}`}>{label}</div>
       </NavLink>
     </Menu.Item>
   )
 }
 
-export default function AccountDropdown() {
+const WalletDropdown: React.FC = observer(() => {
   const { t } = useTranslation()
-  const { showMetaMaskBrowserSidebarLinks } = useContext(ContextProvider)
+  const showWalletConnectedLinks = walletState.isConnected
+  const showMetaMaskExtensionLinks =
+    walletState.isConnected &&
+    walletState.provider === PROVIDERS.METAMASK_EXTENSION
+
   return (
     <Menu position="bottom" trigger="hover">
       <Menu.Target>
@@ -50,48 +56,54 @@ export default function AccountDropdown() {
         <Menu.Label className={styles.menuLabel}>
           {t('hyperplay.currentWallet', `Current wallet`)}
         </Menu.Label>
-        {showMetaMaskBrowserSidebarLinks && (
+        {showMetaMaskExtensionLinks && (
           <>
             <NavigationMenuItem
               label={t('hyperplay.viewFullscreen', `View fullscreen`)}
               to={'/metamaskHome'}
+              showMetaMaskExtensionLinks={showMetaMaskExtensionLinks}
             ></NavigationMenuItem>
             <NavigationMenuItem
               label={t('hyperplay.viewItem', {
                 defaultValue: 'View {{item}}',
                 item: 'Snaps'
               })}
+              showMetaMaskExtensionLinks={showMetaMaskExtensionLinks}
               to={'/metamaskSnaps'}
             ></NavigationMenuItem>
           </>
         )}
-        <Menu.Item
-          className={`${styles.menuItem} `}
-          id={
-            !showMetaMaskBrowserSidebarLinks
-              ? 'topMenuItemWalletDropdown'
-              : undefined
-          }
-        >
-          <NavLink
-            to={'/metamaskPortfolio'}
+        {showWalletConnectedLinks && (
+          <Menu.Item
+            className={`${styles.menuItem} `}
             id={
-              !showMetaMaskBrowserSidebarLinks
-                ? 'topElementWalletDropdown'
+              !showWalletConnectedLinks
+                ? 'topMenuItemWalletDropdown'
                 : undefined
             }
           >
-            <div className={`body ${styles.itemContents}`}>
-              {t('hyperplay.viewPortfolio', `View portfolio`)}
-            </div>
-          </NavLink>
-        </Menu.Item>
+            <NavLink
+              to={'/metamaskPortfolio'}
+              id={
+                !showWalletConnectedLinks
+                  ? 'topElementWalletDropdown'
+                  : undefined
+              }
+            >
+              <div className={`body ${styles.itemContents}`}>
+                {t('hyperplay.viewPortfolio', `View portfolio`)}
+              </div>
+            </NavLink>
+          </Menu.Item>
+        )}
         <Menu.Item
           className={`${styles.menuItem} `}
           onClick={() => onboardingStore.openOnboarding()}
         >
           <div className={`body ${styles.itemContents}`}>
-            {t('hyperplay.changeWallet', `Change wallet`)}
+            {showWalletConnectedLinks
+              ? t('hyperplay.changeWallet', `Change wallet`)
+              : t('hyperplay.connectWallet', `Connect wallet`)}
           </div>
         </Menu.Item>
         <Menu.Label className={styles.menuLabel}>
@@ -107,4 +119,6 @@ export default function AccountDropdown() {
       </Menu.Dropdown>
     </Menu>
   )
-}
+})
+
+export default WalletDropdown

src/frontend/screens/MetaMaskPortfolio/index.tsx

@@ -13,6 +13,7 @@ const MetaMaskPortfolio = function () {
           className={MetaMaskPortfolioStyles.homeWebview}
           src={`https://portfolio.metamask.io/${page}`}
           allowpopups={trueAsStr}
+          partition={'persist:InPageWindowEthereumExternalWallet'}
         />
       </div>
     </>