feat: implement eip-6963

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/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'
@@ -14,15 +15,17 @@ 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 +112,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 +127,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()

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

@@ -1,16 +1,21 @@
-import { Trans } from '@lingui/macro'
+import { ActivationStatus, useActivationState } from 'connection/activate'
+import { Connection } from 'connection/types'
 import { darken } from 'polished'
 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 { useActiveWeb3React } from 'hooks'
+// 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'
 import { useIsAcceptedTerm } from 'state/user/hooks'
-import { ExternalLink } from 'theme'
-import checkForBraveBrowser from 'utils/checkForBraveBrowser'
 
-import { C98OverrideGuide } from './WarningBox'
+// import { ExternalLink } from 'theme'
+
+// import checkForBraveBrowser from 'utils/checkForBraveBrowser'
+
+// import { C98OverrideGuide } from './WarningBox'
 
 const IconWrapper = styled.div`
   display: flex;
@@ -94,163 +99,89 @@ const OptionCardLeft = styled.div`
   height: 100%;
 `
 
-const StyledLink = styled(ExternalLink)`
-  width: 100%;
-  &:hover {
-    text-decoration: none;
-  }
-`
+// const StyledLink = styled(ExternalLink)`
+//   width: 100%;
+//   &:hover {
+//     text-decoration: none;
+//   }
+// `
 
-const Option = ({
-  walletKey,
-  readyState,
-  installLink,
-  isOverridden,
-  onSelected,
-}: {
-  walletKey: SUPPORTED_WALLET
-  readyState?: WalletReadyState
-  installLink?: string
-  isOverridden?: boolean
-  onSelected?: (walletKey: SUPPORTED_WALLET) => any
-}) => {
-  const { walletKey: walletKeyConnected } = useActiveWeb3React()
-  const isBraveBrowser = checkForBraveBrowser()
+const Option = ({ connection }: { connection: Connection }) => {
+  const { activationState, tryActivation } = useActivationState()
   const [isAcceptedTerm] = useIsAcceptedTerm()
 
-  const wallet = SUPPORTED_WALLETS[walletKey]
-  const isConnected = !!walletKeyConnected && walletKey === walletKeyConnected
+  const { chainId } = useWeb3React()
+
+  const { name, icon } = connection.getProviderInfo()
+
+  const isSomeOptionPending = activationState.status === ActivationStatus.PENDING
+  const isCurrentOptionPending = isSomeOptionPending && activationState.connection === connection
 
-  const icon = wallet.icon
+  const closeWalletModal = useCloseModal(ApplicationModal.WALLET)
 
   const content = (
     <OptionCardClickable
       role="button"
-      id={`connect-${walletKey}`}
-      data-testid={`connect-${walletKey}`}
-      onClick={
-        onSelected &&
-        !isConnected &&
-        readyState === WalletReadyState.Installed &&
-        isAcceptedTerm &&
-        !isOverridden &&
-        !(walletKey === 'BRAVE' && !isBraveBrowser)
-          ? () => onSelected(walletKey)
-          : undefined
+      id={`connect-${connection.getProviderInfo().name}`}
+      onClick={() =>
+        tryActivation(
+          connection,
+          () => {
+            closeWalletModal()
+          },
+          chainId,
+        )
       }
-      connected={isConnected}
+      connected={isCurrentOptionPending}
       isDisabled={!isAcceptedTerm}
-      installLink={installLink}
-      overridden={isOverridden}
     >
       <IconWrapper>
         <img src={icon} alt={'Icon'} />
       </IconWrapper>
       <OptionCardLeft>
-        <HeaderText>{wallet.name}</HeaderText>
+        <HeaderText>{name}</HeaderText>
       </OptionCardLeft>
     </OptionCardClickable>
   )
 
   if (!isAcceptedTerm) return content
 
-  if (readyState === WalletReadyState.Loadable && wallet.href) {
-    return <StyledLink href={wallet.href}>{content}</StyledLink>
-  }
-
-  if (walletKey === 'WALLET_CONNECT') {
-    return (
-      <MouseoverTooltip placement="bottom" text={<Trans>Under development and unsupported by most wallets.</Trans>}>
-        {content}
-      </MouseoverTooltip>
-    )
-  }
-
-  if (walletKey === 'BRAVE') {
-    // Brave wallet only can use in Brave browser
-    if (!isBraveBrowser) {
-      return (
-        <MouseoverTooltip
-          placement="bottom"
-          text={
-            <Trans>
-              Brave wallet can only be used in Brave Browser. Download it{' '}
-              <ExternalLink href={wallet.installLink || ''}>here↗</ExternalLink>
-            </Trans>
-          }
-        >
-          {content}
-        </MouseoverTooltip>
-      )
-    }
-    // Brave wallet overrided by Metamask extension
-    if (isBraveBrowser && !window.ethereum?.isBraveWallet) {
-      return (
-        <MouseoverTooltip
-          placement="bottom"
-          text={
-            <Trans>
-              Brave Wallet overridden by MetaMask Wallet. Disable MetaMask extension in order to use Brave Wallet.
-            </Trans>
-          }
-        >
-          {content}
-        </MouseoverTooltip>
-      )
-    }
-    // Brave wallet overrided by Metamask extension
-    if (isBraveBrowser) {
-      return (
-        <MouseoverTooltip
-          placement="bottom"
-          text={
-            <Trans>
-              Brave Wallet overridden by Phantom Wallet. Disable Phantom extension in order to use Brave Wallet.
-            </Trans>
-          }
-        >
-          {content}
-        </MouseoverTooltip>
-      )
-    }
-  }
-
-  if (readyState === WalletReadyState.NotDetected) {
-    return (
-      <MouseoverTooltip
-        placement="bottom"
-        text={
-          <Trans>
-            You will need to install {wallet.name} extension/dapp before you can connect with it on KyberSwap. Get it{' '}
-            <ExternalLink href={wallet.installLink || ''}>here↗</ExternalLink>
-          </Trans>
-        }
-      >
-        {content}
-      </MouseoverTooltip>
-    )
-  }
-
-  if (isOverridden) {
-    return (
-      <MouseoverTooltip
-        width="fit-content"
-        maxWidth="500px"
-        text={
-          walletKey === 'COIN98' ? (
-            <Trans>
-              You need to enable <b>&quot;Override Wallet&quot;</b> in Coin98 settings.
-            </Trans>
-          ) : (
-            <C98OverrideGuide walletKey={walletKey} isOpened={false} />
-          )
-        }
-        placement="bottom"
-      >
-        {content}
-      </MouseoverTooltip>
-    )
-  }
+  // if (readyState === WalletReadyState.NotDetected) {
+  //   return (
+  //     <MouseoverTooltip
+  //       placement="bottom"
+  //       text={
+  //         <Trans>
+  //           You will need to install {wallet.name} extension/dapp before you can connect with it on KyberSwap. Get it{' '}
+  //           <ExternalLink href={wallet.installLink || ''}>here↗</ExternalLink>
+  //         </Trans>
+  //       }
+  //     >
+  //       {content}
+  //     </MouseoverTooltip>
+  //   )
+  // }
+  //
+  // if (isOverridden) {
+  //   return (
+  //     <MouseoverTooltip
+  //       width="fit-content"
+  //       maxWidth="500px"
+  //       text={
+  //         walletKey === 'COIN98' ? (
+  //           <Trans>
+  //             You need to enable <b>&quot;Override Wallet&quot;</b> in Coin98 settings.
+  //           </Trans>
+  //         ) : (
+  //           <C98OverrideGuide walletKey={walletKey} isOpened={false} />
+  //         )
+  //       }
+  //       placement="bottom"
+  //     >
+  //       {content}
+  //     </MouseoverTooltip>
+  //   )
+  // }
 
   return content
 }