feat: implement eip-6963 (#2489)

* feat: implement eip-6963

* refactor: remove unused code

* fix: update chainId from wallet

* fix: update chainId from wallet

* fix: lo price

* fix:  CR-841

* fix: wallet connect

* fix: mobile coinbase link

* fix: network modal

package.json

@@ -45,15 +45,15 @@
   "dependencies": {
     "@0xsquid/sdk": "^2.8.1",
     "@apollo/client": "^3.7.1",
-    "@blocto/web3-react-connector": "^1.0.0",
+    "@blocto/web3-react-connector": "^1.0.7",
     "@coinbase/wallet-sdk": "^3.0.4",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@holdstation/paymaster-helper": "^2.0.20",
-    "@kyberswap/oauth2": "1.0.2",
     "@kyberswap/krystal-walletconnect-v2": "0.0.1",
     "@kyberswap/ks-sdk-classic": "^1.0.3",
     "@kyberswap/ks-sdk-core": "1.1.3",
     "@kyberswap/ks-sdk-elastic": "^1.1.2",
+    "@kyberswap/oauth2": "1.0.2",
     "@lingui/macro": "^4.6.0",
     "@lingui/react": "^4.6.0",
     "@popperjs/core": "^2.11.6",
@@ -67,8 +67,11 @@
     "@use-gesture/react": "^10.2.27",
     "@web3-react/coinbase-wallet": "8.2.0",
     "@web3-react/core": "8.2.0",
+    "@web3-react/eip1193": "8.2.0",
+    "@web3-react/empty": "8.2.0",
     "@web3-react/gnosis-safe": "8.2.0",
-    "@web3-react/metamask": "^8.2.1",
+    "@web3-react/metamask": "8.2.1",
+    "@web3-react/network": "8.2.0",
     "@web3-react/types": "8.2.0",
     "@web3-react/walletconnect-v2": "^8.3.3",
     "@zkmelabs/widget": "^0.1.3",
@@ -89,6 +92,7 @@
     "html2canvas": "^1.4.1",
     "html5-qrcode": "^2.3.8",
     "inter-ui": "^3.19.3",
+    "jotai": "1.3.7",
     "jsbi": "^3.2.5",
     "lightweight-charts": "^3.3.0",
     "memoize-one": "^6.0.0",

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'
@@ -133,8 +133,10 @@ const DraggableNetworkButton = ({
   isComingSoon?: boolean
 }) => {
   const theme = useTheme()
-  const { isWrongNetwork, wallet } = useActiveWeb3React()
+  const { isWrongNetwork, walletKey: walletName, chainId: walletChainId } = useActiveWeb3React()
   const { changeNetwork } = useChangeNetwork()
+  const { connector } = useWeb3React()
+  const connection = getConnection(connector)
   const [dragging, setDragging] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
   const dragControls = useDragControls()
@@ -145,7 +147,7 @@ const DraggableNetworkButton = ({
   const isMaintenance = state === ChainState.MAINTENANCE
   const disabled = isComingSoon || (activeChainIds ? !activeChainIds?.includes(chainId) : false) || isMaintenance
   const selected = isSelected && !isWrongNetwork
-  const walletKey = wallet.chainId === chainId ? wallet.walletKey : null
+  const walletKey = walletChainId === chainId ? walletName : null
 
   const handleChainSelect = () => {
     if (disabled) return
@@ -288,9 +290,9 @@ const DraggableNetworkButton = ({
               </MaintainLabel>
             )}
             {selected && !walletKey && <CircleGreen />}
-            {walletKey && (
+            {walletKey && connection.getProviderInfo().icon && (
               <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

@@ -1,6 +1,7 @@
 import { Trans } from '@lingui/macro'
+import { getConnection } from 'connection'
 import { darken, lighten } from 'polished'
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import { Activity } from 'react-feather'
 import { useMedia } from 'react-use'
 import styled from 'styled-components'
@@ -13,16 +14,17 @@ 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 } from 'hooks'
+import { useActiveWeb3React, useWeb3React } from 'hooks'
 import useENSName from 'hooks/useENSName'
 import useLogin from 'hooks/useLogin'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import { useNetworkModalToggle, useWalletModalToggle } from 'state/application/hooks'
+import { useAppDispatch } from 'state/hooks'
 import { useSignedAccountInfo } from 'state/profile/hooks'
 import { isTransactionRecent, newTransactionsFirst, useAllTransactions } from 'state/transactions/hooks'
 import { TransactionDetails } from 'state/transactions/type'
+import { updateRecentConnectionMeta } from 'state/user/actions'
 import { MEDIA_WIDTHS } from 'theme'
 import { shortenAddress } from 'utils'
 
@@ -109,6 +111,9 @@ function Web3StatusInner() {
   const { signIn } = useLogin()
   const { ENSName } = useENSName(account ?? undefined)
   const theme = useTheme()
+  const { connector } = useWeb3React()
+  const connection = getConnection(connector)
+  const dispatch = useAppDispatch()
 
   const allTransactions = useAllTransactions()
 
@@ -121,6 +126,15 @@ function Web3StatusInner() {
 
   const pendingLength = sortedRecentTransactions.filter(tx => !tx.receipt).length
 
+  useEffect(() => {
+    if (account || ENSName) {
+      const { rdns } = connection.getProviderInfo()
+      dispatch(
+        updateRecentConnectionMeta({ type: connection.type, address: account, ENSName: ENSName ?? undefined, rdns }),
+      )
+    }
+  }, [ENSName, account, connection, dispatch])
+
   const hasPendingTransactions = !!pendingLength
   const toggleWalletModal = useWalletModalToggle()
   const toggleNetworkModal = useNetworkModalToggle()
@@ -182,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>
               )
             )}