refactor: remove unused code

src/components/AddToMetamask/index.tsx

@@ -1,10 +1,10 @@
 import { Token } from '@kyberswap/ks-sdk-core'
+import { getConnection } from 'connection'
 import styled from 'styled-components'
 
 import { ButtonEmpty } from 'components/Button'
 import { RowFixed } from 'components/Row'
-import { SUPPORTED_WALLETS } from 'constants/wallets'
-import { useActiveWeb3React } from 'hooks'
+import { useActiveWeb3React, useWeb3React } from 'hooks'
 import { getTokenLogoURL } from 'utils'
 
 const StyledLogo = styled.img`
@@ -14,6 +14,8 @@ const StyledLogo = styled.img`
 
 export default function AddTokenToMetaMask({ token }: { token: Token }) {
   const { chainId, walletKey } = useActiveWeb3React()
+  const { connector } = useWeb3React()
+  const connection = getConnection(connector)
 
   async function addToMetaMask() {
     const tokenAddress = token.address
@@ -44,7 +46,7 @@ export default function AddTokenToMetaMask({ token }: { token: Token }) {
   return (
     <ButtonEmpty mt="12px" padding="0" width="fit-content" onClick={addToMetaMask}>
       <RowFixed>
-        <StyledLogo src={SUPPORTED_WALLETS[walletKey].icon} />
+        <StyledLogo src={connection.getProviderInfo().icon} />
       </RowFixed>
     </ButtonEmpty>
   )

src/components/Header/web3/NetworkModal/components/DraggableNetworkButton.tsx

@@ -1,5 +1,6 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 import { Trans, t } from '@lingui/macro'
+import { getConnection } from 'connection'
 import { motion, useAnimationControls, useDragControls } from 'framer-motion'
 import { rgba } from 'polished'
 import { stringify } from 'querystring'
@@ -14,8 +15,7 @@ import Row from 'components/Row'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { NetworkInfo } from 'constants/networks/type'
 import { Z_INDEXS } from 'constants/styles'
-import { SUPPORTED_WALLETS } from 'constants/wallets'
-import { useActiveWeb3React } from 'hooks'
+import { useActiveWeb3React, useWeb3React } from 'hooks'
 import { ChainState } from 'hooks/useChainsConfig'
 import useParsedQueryString from 'hooks/useParsedQueryString'
 import useTheme from 'hooks/useTheme'
@@ -135,6 +135,8 @@ const DraggableNetworkButton = ({
   const theme = useTheme()
   const { isWrongNetwork, wallet } = useActiveWeb3React()
   const { changeNetwork } = useChangeNetwork()
+  const { connector } = useWeb3React()
+  const connection = getConnection(connector)
   const [dragging, setDragging] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
   const dragControls = useDragControls()
@@ -290,7 +292,7 @@ const DraggableNetworkButton = ({
             {selected && !walletKey && <CircleGreen />}
             {walletKey && (
               <WalletWrapper>
-                <img src={SUPPORTED_WALLETS[walletKey].icon} alt={SUPPORTED_WALLETS[walletKey].name + ' icon'} />
+                <img src={connection.getProviderInfo().icon} alt="" />
               </WalletWrapper>
             )}
           </Row>

src/components/Header/web3/SelectWallet.tsx

@@ -14,7 +14,6 @@ import Loader from 'components/Loader'
 import { RowBetween } from 'components/Row'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { TutorialIds } from 'components/Tutorial/TutorialSwap/constant'
-import { SUPPORTED_WALLETS } from 'constants/wallets'
 import { useActiveWeb3React, useWeb3React } from 'hooks'
 import useENSName from 'hooks/useENSName'
 import useLogin from 'hooks/useLogin'
@@ -197,7 +196,7 @@ function Web3StatusInner() {
             ) : (
               walletKey && (
                 <IconWrapper size={16}>
-                  <img src={SUPPORTED_WALLETS[walletKey].icon} alt={SUPPORTED_WALLETS[walletKey].name + ' icon'} />
+                  <img src={connection.getProviderInfo().icon} alt="" />
                 </IconWrapper>
               )
             )}

src/components/Header/web3/WalletModal/Option.tsx

@@ -5,7 +5,6 @@ import React from 'react'
 import styled, { css } from 'styled-components'
 
 // import { MouseoverTooltip } from 'components/Tooltip'
-// import { SUPPORTED_WALLET, SUPPORTED_WALLETS, WalletReadyState } from 'constants/wallets'
 import { useWeb3React } from 'hooks'
 import { useCloseModal } from 'state/application/hooks'
 import { ApplicationModal } from 'state/application/types'

src/components/TransactionConfirmationModal/index.tsx

@@ -1,5 +1,7 @@
 import { ChainId, Currency, Token } from '@kyberswap/ks-sdk-core'
 import { Trans } from '@lingui/macro'
+import { getConnection } from 'connection'
+import { ConnectionType } from 'connection/types'
 import React, { useState } from 'react'
 import { ArrowUpCircle, BarChart2 } from 'react-feather'
 import { Flex, Text } from 'rebass'
@@ -13,8 +15,7 @@ import Loader from 'components/Loader'
 import Modal from 'components/Modal'
 import { RowBetween, RowFixed } from 'components/Row'
 import ListGridViewGroup from 'components/YieldPools/ListGridViewGroup'
-import { SUPPORTED_WALLETS } from 'constants/wallets'
-import { useActiveWeb3React } from 'hooks'
+import { useActiveWeb3React, useWeb3React } from 'hooks'
 import useTheme from 'hooks/useTheme'
 import { VIEW_MODE } from 'state/user/reducer'
 import { ExternalLink } from 'theme'
@@ -85,7 +86,8 @@ export function ConfirmationPendingContent({
 }
 
 function AddTokenToInjectedWallet({ token, chainId }: { token: Token; chainId: ChainId }) {
-  const { walletKey } = useActiveWeb3React()
+  const { connector } = useWeb3React()
+  const connection = getConnection(connector)
   const handleClick = async () => {
     const tokenAddress = token.address
     const tokenSymbol = token.symbol
@@ -113,18 +115,16 @@ function AddTokenToInjectedWallet({ token, chainId }: { token: Token; chainId: C
     }
   }
 
-  if (!walletKey) return null
-  if (walletKey === 'WALLET_CONNECT') return null
-  if (walletKey === 'KRYSTAL_WC') return null
-  const walletConfig = SUPPORTED_WALLETS[walletKey]
+  if (!connection || connection.type === ConnectionType.WALLET_CONNECT_V2) return null
+  const { name, icon } = connection.getProviderInfo()
 
   return (
     <ButtonLight mt="12px" padding="6px 12px" width="fit-content" onClick={handleClick}>
       <RowFixed>
         <Trans>
-          Add {token.symbol} to {walletConfig.name}
+          Add {token.symbol} to {name}
         </Trans>{' '}
-        <StyledLogo src={walletConfig.icon} />
+        <StyledLogo src={icon} />
       </RowFixed>
     </ButtonLight>
   )

src/components/WalletPopup/WalletView.tsx

@@ -1,4 +1,5 @@
 import { Trans, t } from '@lingui/macro'
+import { getConnection } from 'connection'
 import { rgba } from 'polished'
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { ChevronLeft, FileText, LogOut, StopCircle, X } from 'react-feather'
@@ -16,8 +17,7 @@ import MyAssets from 'components/WalletPopup/MyAssets'
 import PinButton from 'components/WalletPopup/PinButton'
 import SendToken from 'components/WalletPopup/SendToken'
 import { APP_PATHS } from 'constants/index'
-import { SUPPORTED_WALLETS } from 'constants/wallets'
-import { useActiveWeb3React } from 'hooks'
+import { useActiveWeb3React, useWeb3React } from 'hooks'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import useDisconnectWallet from 'hooks/web3/useDisconnectWallet'
@@ -132,6 +132,8 @@ export default function WalletView({
   const nodeRef = useRef<HTMLDivElement>(null)
   const [isMinimal, setMinimal] = useState(false)
   const { chainId, account = '', walletKey } = useActiveWeb3React()
+  const { connector } = useWeb3React()
+  const connection = getConnection(connector)
   const disconnectWallet = useDisconnectWallet()
 
   const {
@@ -327,11 +329,7 @@ export default function WalletView({
               <Flex alignItems={'center'} style={{ gap: 8 }} color={theme.subText}>
                 {walletKey && (
                   <IconWrapper>
-                    <img
-                      height={18}
-                      src={SUPPORTED_WALLETS[walletKey].icon}
-                      alt={SUPPORTED_WALLETS[walletKey].name + ' icon'}
-                    />
+                    <img height={18} src={connection.getProviderInfo().icon} alt="" />
                   </IconWrapper>
                 )}
                 <Text as="span" fontWeight="500">

src/hooks/web3/useDisconnectWallet.ts

@@ -1,42 +1,18 @@
-import { Connector } from '@web3-react/types'
 import { useCallback } from 'react'
 
-import { coinbaseWallet, krystalWalletConnectV2, walletConnectV2 } from 'constants/connectors'
-import { LOCALSTORAGE_LAST_WALLETKEY_EVM, SUPPORTED_WALLETS } from 'constants/wallets'
-import { useActiveWeb3React, useWeb3React } from 'hooks'
-
-const disconnectEvmConnector: (connector: Connector | undefined) => void | Promise<void> = (
-  connector: Connector | undefined,
-) => {
-  if (connector) {
-    if (connector === coinbaseWallet) {
-      return connector.resetState()
-    }
-    connector.deactivate?.()
-    connector.resetState?.()
-    if (connector === walletConnectV2 || connector === krystalWalletConnectV2) {
-      // This key should be deleted when disconnected by walletconnect library
-      // But it was deleted slowly, if user call connector.active() again before this key cleared, bug will appear
-      // So we force remove it right after disconnected to preventing bug
-      // todo: deep dive rootcause why it slowly delete
-      localStorage.removeItem('wc@2:client:0.3//session')
-    }
-  }
-}
+import { useWeb3React } from 'hooks'
+import { useAppDispatch } from 'state/hooks'
+import { setRecentConnectionDisconnected } from 'state/user/actions'
 
 const useDisconnectWallet = () => {
-  const { walletKey } = useActiveWeb3React()
+  const dispatch = useAppDispatch()
   const { connector } = useWeb3React()
-  return useCallback(async () => {
-    const wallet = walletKey && SUPPORTED_WALLETS[walletKey]
-    // If wallet support both network, disconnect to both
-    if (wallet) {
-      await disconnectEvmConnector(connector)
-      localStorage.removeItem(LOCALSTORAGE_LAST_WALLETKEY_EVM)
-    } else {
-      await disconnectEvmConnector(connector)
-      localStorage.removeItem(LOCALSTORAGE_LAST_WALLETKEY_EVM)
-    }
-  }, [connector, walletKey])
+  const disconnect = useCallback(() => {
+    connector.deactivate?.()
+    connector.resetState()
+    dispatch(setRecentConnectionDisconnected())
+  }, [connector, dispatch])
+
+  return disconnect
 }
 export default useDisconnectWallet