feat: don't allow disconnect/change on injected mobile wallets (#4015)

* feat: don't allow disconnect/change on injected mobile wallets

* new variable

src/components/AccountDetails/index.tsx

@@ -7,6 +7,7 @@ import { ExternalLink as LinkIcon } from 'react-feather'
 import { useAppDispatch } from 'state/hooks'
 import { updateSelectedWallet } from 'state/user/reducer'
 import styled, { ThemeContext } from 'styled-components/macro'
+import { isMobile } from 'utils/userAgent'
 
 import { ReactComponent as Close } from '../../assets/images/x.svg'
 import { coinbaseWallet, injected } from '../../connectors'
@@ -230,6 +231,10 @@ export default function AccountDetails({
   const theme = useContext(ThemeContext)
   const dispatch = useAppDispatch()
 
+  const isMetaMask = !!window.ethereum?.isMetaMask
+  const isCoinbaseWallet = !!window.ethereum?.isCoinbaseWallet
+  const isInjectedMobileBrowser = (isMetaMask || isCoinbaseWallet) && isMobile
+
   function formatConnectorName() {
     const { ethereum } = window
     const isMetaMask = !!(ethereum && ethereum.isMetaMask)
@@ -265,36 +270,40 @@ export default function AccountDetails({
               <AccountGroupingRow>
                 {formatConnectorName()}
                 <div>
-                  <WalletAction
-                    style={{ fontSize: '.825rem', fontWeight: 400, marginRight: '8px' }}
-                    onClick={() => {
-                      if (connector.deactivate) {
-                        connector.deactivate()
-
-                        // Coinbase Wallet SDK does not emit a disconnect event to the provider,
-                        // which is what web3-react uses to reset state. As a workaround we manually
-                        // reset state.
-                        if (connector === coinbaseWallet) {
-                          connector.resetState()
-                        }
-                      } else {
-                        connector.resetState()
-                      }
-
-                      dispatch(updateSelectedWallet({ wallet: undefined }))
-                      openOptions()
-                    }}
-                  >
-                    <Trans>Disconnect</Trans>
-                  </WalletAction>
-                  <WalletAction
-                    style={{ fontSize: '.825rem', fontWeight: 400 }}
-                    onClick={() => {
-                      openOptions()
-                    }}
-                  >
-                    <Trans>Change</Trans>
-                  </WalletAction>
+                  {!isInjectedMobileBrowser && (
+                    <>
+                      <WalletAction
+                        style={{ fontSize: '.825rem', fontWeight: 400, marginRight: '8px' }}
+                        onClick={() => {
+                          if (connector.deactivate) {
+                            connector.deactivate()
+
+                            // Coinbase Wallet SDK does not emit a disconnect event to the provider,
+                            // which is what web3-react uses to reset state. As a workaround we manually
+                            // reset state.
+                            if (connector === coinbaseWallet) {
+                              connector.resetState()
+                            }
+                          } else {
+                            connector.resetState()
+                          }
+
+                          dispatch(updateSelectedWallet({ wallet: undefined }))
+                          openOptions()
+                        }}
+                      >
+                        <Trans>Disconnect</Trans>
+                      </WalletAction>
+                      <WalletAction
+                        style={{ fontSize: '.825rem', fontWeight: 400 }}
+                        onClick={() => {
+                          openOptions()
+                        }}
+                      >
+                        <Trans>Change</Trans>
+                      </WalletAction>
+                    </>
+                  )}
                 </div>
               </AccountGroupingRow>
               <AccountGroupingRow data-testid="web3-account-identifier-row">