feat: migrate from web3-react to wagmi

package.json

@@ -44,11 +44,9 @@
   "dependencies": {
     "@0xsquid/sdk": "^2.8.1",
     "@apollo/client": "^3.7.1",
-    "@blocto/web3-react-connector": "^1.0.7",
-    "@coinbase/wallet-sdk": "^3.0.4",
+    "@blocto/wagmi-connector": "^2.0.4",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@holdstation/paymaster-helper": "^2.0.20",
-    "@kyberswap/krystal-walletconnect-v2": "0.0.1",
     "@kyberswap/ks-sdk-classic": "^1.0.3",
     "@kyberswap/ks-sdk-core": "1.1.5",
     "@kyberswap/ks-sdk-elastic": "^1.1.2",
@@ -63,16 +61,8 @@
     "@reduxjs/toolkit": "1.9.3",
     "@sentry/react": "^7.18.0",
     "@sentry/tracing": "^7.18.0",
+    "@tanstack/react-query": "^5.52.1",
     "@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/network": "8.2.0",
-    "@web3-react/types": "8.2.0",
-    "@web3-react/walletconnect-v2": "^8.3.3",
     "@zkmelabs/widget": "^0.1.3",
     "aos": "^2.3.4",
     "axios": "1.2.1",
@@ -130,7 +120,9 @@
     "swiper": "^8.4.4",
     "ua-parser-js": "^1.0.33",
     "util": "^0.12.5",
+    "viem": "^2.20.0",
     "vite-plugin-env-compatible": "^1.1.1",
+    "wagmi": "^2.12.7",
     "walktour": "^5.2.0",
     "wcag-contrast": "^3.0.0",
     "workbox-core": "^6.5.4",
@@ -202,7 +194,7 @@
     "prom-client": "^14.2.0",
     "storybook": "^7.6.2",
     "ts-node": "^10.9.1",
-    "typescript": "4.8.4",
+    "typescript": "5.3.3",
     "vite": "^4.3.9",
     "vite-plugin-checker": "^0.5.6",
     "vite-plugin-svgr": "^2.4.0",

public/.well-known/walletconnect.txt

@@ -1 +1 @@
-b52e5f7a-d705-4e20-8eff-1dc8676996d6=489d0fca236bddfb749f13dcf60bc4686ab33803a980874f43f99e36c3f48518
+b52e5f7a-d705-4e20-8eff-1dc8676996d6=489d0fca236bddfb749f13dcf60bc4686ab33803a980874f43f99e36c3f48518

src/components/AddToMetamask/index.tsx

@@ -1,9 +1,9 @@
 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 { CONNECTOR_ICON_OVERRIDE_MAP } from 'components/Web3Provider'
 import { useActiveWeb3React, useWeb3React } from 'hooks'
 import { getTokenLogoURL } from 'utils'
 
@@ -15,7 +15,6 @@ 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
@@ -40,14 +39,15 @@ export default function AddTokenToMetaMask({ token }: { token: Token }) {
       console.error(error)
     }
   }
-  const { icon } = connection.getProviderInfo()
+  const icon = CONNECTOR_ICON_OVERRIDE_MAP[connector?.id || ''] ?? connector?.icon
+
   if (!walletKey || !icon) return null
-  if (walletKey === 'WALLET_CONNECT') return null
+  if (walletKey === 'WalletConnect') return null
   if (walletKey === 'COINBASE') return null // Coinbase wallet no need to add since it automatically track token
   return (
     <ButtonEmpty mt="12px" padding="0" width="fit-content" onClick={addToMetaMask}>
       <RowFixed>
-        <StyledLogo src={connection.getProviderInfo().icon} />
+        <StyledLogo src={icon} />
       </RowFixed>
     </ButtonEmpty>
   )

src/components/DownloadWalletModal/index.tsx

@@ -4,10 +4,19 @@ import { X } from 'react-feather'
 import { Image, Text } from 'rebass'
 import styled from 'styled-components'
 
+import bloctoIcon from 'assets/wallets-connect/bocto.svg'
+import braveIcon from 'assets/wallets-connect/brave.svg'
+import coin98Icon from 'assets/wallets-connect/coin98.svg'
+import coinbaseIcon from 'assets/wallets-connect/coinbase.svg'
+import krystalIcon from 'assets/wallets-connect/krystal.svg'
+import metaMaskIcon from 'assets/wallets-connect/metamask.svg'
+import rabbyIcon from 'assets/wallets-connect/rabby.svg'
+import safeIcon from 'assets/wallets-connect/safe.svg'
+import trustWalletIcon from 'assets/wallets-connect/trust-wallet.svg'
+import zerionIcon from 'assets/wallets-connect/zerion.svg'
 import Column from 'components/Column'
 import Modal from 'components/Modal'
 import Row, { RowBetween } from 'components/Row'
-import { connections } from 'constants/wallets'
 import useTheme from 'hooks/useTheme'
 import { ApplicationModal } from 'state/application/actions'
 import { useCloseModal, useModalOpen } from 'state/application/hooks'
@@ -37,6 +46,49 @@ const DownloadWalletRow = styled.a`
   }
 `
 
+const wallets = [
+  {
+    name: 'Krystal',
+    icon: krystalIcon,
+    installLink: 'https://wallet.krystal.app',
+  },
+
+  {
+    name: 'Rabby',
+    icon: rabbyIcon,
+    installLink: 'https://rabby.io',
+  },
+
+  {
+    name: 'Zerion',
+    icon: zerionIcon,
+    installLink: 'https://zerion.io',
+  },
+
+  {
+    name: 'Trust Wallet',
+    icon: trustWalletIcon,
+    installLink: 'https://trustwallet.com/vi/deeplink',
+  },
+
+  {
+    name: 'Brave Wallet',
+    icon: braveIcon,
+    installLink: 'https://brave.com/download',
+  },
+
+  { name: 'Safe Wallet', icon: safeIcon, installLink: 'https://safe.global/wallet' },
+
+  { name: 'Coinbase', icon: coinbaseIcon, installLink: 'https://www.coinbase.com/wallet' },
+  { name: 'Coin98', icon: coin98Icon, installLink: 'https://wallet.coin98.com/' },
+  { name: 'Blocto', icon: bloctoIcon, installLink: 'https://blocto.io/download' },
+  {
+    name: 'MetaMask',
+    icon: metaMaskIcon,
+    installLink: 'https://metamask.io/download',
+  },
+]
+
 export default function DownloadWalletModal() {
   const theme = useTheme()
   const isOpen = useModalOpen(ApplicationModal.DOWNLOAD_WALLET)
@@ -55,7 +107,7 @@ export default function DownloadWalletModal() {
         </RowBetween>
 
         <Row gap="20px" marginTop="24px" flexWrap="wrap">
-          {Object.values(connections)
+          {wallets
             .filter(e => e.installLink)
             .map(item => (
               <DownloadWalletRow

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

@@ -1,6 +1,5 @@
 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'
@@ -136,7 +135,6 @@ const DraggableNetworkButton = ({
   const { isWrongNetwork, walletKey: walletName, chainId: walletChainId } = useActiveWeb3React()
   const { changeNetwork } = useChangeNetwork()
   const { connector, account } = useWeb3React()
-  const connection = getConnection(connector)
   const [dragging, setDragging] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
   const dragControls = useDragControls()
@@ -290,9 +288,9 @@ const DraggableNetworkButton = ({
               </MaintainLabel>
             )}
             {selected && !walletKey && <CircleGreen />}
-            {account && walletKey && connection.getProviderInfo().icon && (
+            {account && walletKey && connector?.icon && (
               <WalletWrapper>
-                <img src={connection.getProviderInfo().icon} alt="" />
+                <img src={connector.icon} alt="" />
               </WalletWrapper>
             )}
           </Row>

src/components/Header/web3/SelectWallet.tsx

@@ -1,7 +1,6 @@
 import { Trans } from '@lingui/macro'
-import { getConnection } from 'connection'
 import { darken, lighten } from 'polished'
-import { useEffect, useMemo } from 'react'
+import { useMemo } from 'react'
 import { Activity } from 'react-feather'
 import { useMedia } from 'react-use'
 import styled from 'styled-components'
@@ -14,17 +13,16 @@ import Loader from 'components/Loader'
 import { RowBetween } from 'components/Row'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { TutorialIds } from 'components/Tutorial/TutorialSwap/constant'
+import { CONNECTOR_ICON_OVERRIDE_MAP } from 'components/Web3Provider'
 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'
 
@@ -106,14 +104,12 @@ const AccountElement = styled.div`
 
 function Web3StatusInner() {
   const { chainId, account, walletKey, isWrongNetwork } = useActiveWeb3React()
+  const { connector } = useWeb3React()
   const { mixpanelHandler } = useMixpanel()
   const uptoMedium = useMedia(`(max-width: ${MEDIA_WIDTHS.upToMedium}px)`)
   const { signIn } = useLogin()
   const { ENSName } = useENSName(account ?? undefined)
   const theme = useTheme()
-  const { connector } = useWeb3React()
-  const connection = getConnection(connector)
-  const dispatch = useAppDispatch()
 
   const allTransactions = useAllTransactions()
 
@@ -126,20 +122,13 @@ 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()
   const { isSignInDifferentWallet } = useSignedAccountInfo()
 
+  const icon = CONNECTOR_ICON_OVERRIDE_MAP[connector?.id || ''] ?? connector?.icon
+
   if (isWrongNetwork) {
     return (
       <Web3StatusError onClick={toggleNetworkModal}>
@@ -196,7 +185,7 @@ function Web3StatusInner() {
             ) : (
               walletKey && (
                 <IconWrapper size={16}>
-                  <img src={connection.getProviderInfo().icon} alt="" />
+                  <img src={icon} alt="" />
                 </IconWrapper>
               )
             )}