feat: disconnect for coinbase wallet (#3993)

* feat: disconnect for coinbase wallet

* change isActive logic

* remove logs

* reset state for coinbase wallet

* active -> isActive

* rm data-cy

package.json

@@ -105,7 +105,7 @@
     "typescript": "^4.4.3"
   },
   "dependencies": {
-    "@coinbase/wallet-sdk": "^3.2.0",
+    "@coinbase/wallet-sdk": "^3.3.0",
     "@fontsource/ibm-plex-mono": "^4.5.1",
     "@fontsource/inter": "^4.5.1",
     "@lingui/core": "^3.9.0",

src/components/AccountDetails/index.tsx

@@ -265,19 +265,28 @@ export default function AccountDetails({
               <AccountGroupingRow>
                 {formatConnectorName()}
                 <div>
-                  {/* Coinbase Wallet reloads the page right now, which breaks the selectedWallet from being set properly on localStorage */}
-                  {connector !== coinbaseWallet && (
-                    <WalletAction
-                      style={{ fontSize: '.825rem', fontWeight: 400, marginRight: '8px' }}
-                      onClick={() => {
-                        connector.deactivate ? connector.deactivate() : connector.resetState()
-                        dispatch(updateSelectedWallet({ wallet: undefined }))
-                        openOptions()
-                      }}
-                    >
-                      <Trans>Disconnect</Trans>
-                    </WalletAction>
-                  )}
+                  <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={() => {

src/components/WalletModal/Option.tsx

@@ -3,8 +3,8 @@ import styled from 'styled-components/macro'
 
 import { ExternalLink } from '../../theme'
 
-const InfoCard = styled.button<{ active?: boolean }>`
-  background-color: ${({ theme, active }) => (active ? theme.bg3 : theme.bg2)};
+const InfoCard = styled.button<{ isActive?: boolean }>`
+  background-color: ${({ theme, isActive }) => (isActive ? theme.bg3 : theme.bg2)};
   padding: 1rem;
   outline: none;
   border: 1px solid;
@@ -13,7 +13,7 @@ const InfoCard = styled.button<{ active?: boolean }>`
   &:focus {
     box-shadow: 0 0 0 1px ${({ theme }) => theme.primary1};
   }
-  border-color: ${({ theme, active }) => (active ? 'transparent' : theme.bg3)};
+  border-color: ${({ theme, isActive }) => (isActive ? 'transparent' : theme.bg3)};
 `
 
 const OptionCard = styled(InfoCard as any)`
@@ -97,7 +97,7 @@ export default function Option({
   header,
   subheader = null,
   icon,
-  active = false,
+  isActive = false,
   id,
 }: {
   link?: string | null
@@ -108,20 +108,20 @@ export default function Option({
   header: React.ReactNode
   subheader: React.ReactNode | null
   icon: string
-  active?: boolean
+  isActive?: boolean
   id: string
 }) {
   const content = (
     <OptionCardClickable
       id={id}
       onClick={onClick}
-      clickable={clickable && !active}
-      active={active}
+      clickable={clickable && !isActive}
+      active={isActive}
       data-testid="wallet-modal-option"
     >
       <OptionCardLeft>
         <HeaderText color={color}>
-          {active ? (
+          {isActive ? (
             <CircleWrapper>
               <GreenCircle>
                 <div />

src/components/WalletModal/index.tsx

@@ -189,10 +189,9 @@ export default function WalletModal({
     const isCoinbaseWallet = !!window.ethereum?.isCoinbaseWallet
     return Object.keys(SUPPORTED_WALLETS).map((key) => {
       const option = SUPPORTED_WALLETS[key]
-      const isActive = option.connector === connector
 
       const optionProps = {
-        active: isActive,
+        isActive: option.connector === connector,
         id: `connect-${key}`,
         link: option.href,
         header: option.name,
@@ -212,7 +211,7 @@ export default function WalletModal({
             <Option
               {...optionProps}
               onClick={() => {
-                if (!isActive && !option.href && !!option.connector) {
+                if (!option.href && !!option.connector) {
                   tryActivation(option.connector)
                 }
               }}
@@ -262,7 +261,7 @@ export default function WalletModal({
               }}
               color={'#E8831D'}
               header={<Trans>Tally</Trans>}
-              active={option.connector === connector}
+              isActive={option.connector === connector}
               subheader={null}
               link={null}
               icon={TallyIcon}

src/connectors/index.ts

@@ -114,6 +114,7 @@ export const [coinbaseWallet, coinbaseWalletHooks] = initializeConnector<Coinbas
         url: INFURA_NETWORK_URLS[SupportedChainId.MAINNET],
         appName: 'Uniswap',
         appLogoUrl: UNISWAP_LOGO_URL,
+        reloadOnDisconnect: false,
       },
       onError,
     })

yarn.lock

@@ -1285,7 +1285,7 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
-"@coinbase/wallet-sdk@^3.2.0":
+"@coinbase/wallet-sdk@^3.3.0":
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/@coinbase/wallet-sdk/-/wallet-sdk-3.3.0.tgz#e77383bce1388e5367dc35f8309702e73be47503"
   integrity sha512-Prmxs5eYRxe5i+kDSsny97oPG4Pa5PhLmNDx8f7UQrvlPowGy5Tg0gHOqCie6ck2shVMdW8sKJ+RCLIRZ9kIjA==