feat: integrate wallets (#2177)

package.json

@@ -45,7 +45,9 @@
   "dependencies": {
     "@0xsquid/sdk": "^1.4.1",
     "@apollo/client": "^3.7.1",
+    "@blocto/web3-react-connector": "^1.0.0",
     "@datadog/browser-rum": "^4.23.3",
+    "@coinbase/wallet-sdk": "^3.0.4",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@kybernetwork/oauth2": "1.0.0",
     "@kyberswap/ks-sdk-classic": "^1.0.3",
@@ -69,12 +71,12 @@
     "@solana/wallet-adapter-wallets": "^0.19.5",
     "@solana/web3.js": "^1.66.2",
     "@use-gesture/react": "^10.2.27",
-    "@web3-react/coinbase-wallet": "^8.2.0",
-    "@web3-react/core": "^8.2.0",
+    "@web3-react/coinbase-wallet": "8.2.0",
+    "@web3-react/core": "8.2.0",
+    "@web3-react/gnosis-safe": "8.2.0",
     "@web3-react/metamask": "^8.2.1",
-    "@web3-react/types": "^8.2.0",
+    "@web3-react/types": "8.2.0",
     "@web3-react/walletconnect-v2": "^8.3.3",
-    "@web3-react/walletlink-connector": "^6.2.14",
     "aos": "^2.3.4",
     "axios": "1.2.1",
     "base64-js": "^1.5.1",
@@ -204,4 +206,4 @@
     "@lingui/core": "3.14.0",
     "@lingui/conf": "3.16.0"
   }
-}
+}

src/components/FeeSelector/index.tsx

@@ -220,7 +220,7 @@ function FeeSelector({
     (acc, cur, index) => ({ ...acc, [cur]: poolAddresses[index] }),
     {} as { [key in FeeAmount]: string },
   )
-  const tiersThatHasFarmV1 = FEE_AMOUNTS.filter((_fee, i) => {
+  const tiersThatHasFarmV1: FeeAmount[] = FEE_AMOUNTS.filter((_fee, i) => {
     const poolAddress = poolAddresses[i].toLowerCase()
     return farmingPoolAddress.includes(poolAddress)
   })
@@ -249,7 +249,7 @@ function FeeSelector({
       </Flex>
 
       <Flex alignItems="center" sx={{ gap: '8px' }}>
-        {(tiersThatHasFarmV1.includes(feeAmount) ||
+        {(tiersThatHasFarmV1.includes(feeAmount as any) ||
           activeFarmV2s?.find(item => item.poolAddress === poolByFeeAmount[feeAmount].toLowerCase())) && (
           <FarmTag address={poolByFeeAmount[feeAmount]} />
         )}

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

@@ -123,13 +123,12 @@ const Networks = ({
   customToggleModal?: () => void
   disabledMsg?: string
 }) => {
-  const { chainId: currentChainId, isWrongNetwork } = useActiveWeb3React()
+  const { chainId: currentChainId, isWrongNetwork, walletEVM, walletSolana } = useActiveWeb3React()
   const { changeNetwork } = useChangeNetwork()
   const qs = useParsedQueryString()
   const navigate = useNavigate()
   const isDarkMode = useIsDarkMode()
   const theme = useTheme()
-  const { walletEVM, walletSolana } = useActiveWeb3React()
   const onSelect = (chainId: ChainId) => {
     customToggleModal?.()
     if (customOnSelectNetwork) {
@@ -160,20 +159,29 @@ const Networks = ({
 
   return (
     <NetworkList mt={mt} mb={mb}>
-      {MAINNET_NETWORKS.map((key: ChainId, i: number) => {
-        const { iconDark, icon, name } = NETWORKS_INFO[key]
-        const disabled = !isAcceptedTerm || (activeChainIds ? !activeChainIds?.includes(key) : false)
-        const selected = selectedId === key && !isWrongNetwork
+      {MAINNET_NETWORKS.map((itemChainId: ChainId, i: number) => {
+        const { iconDark, icon, name } = NETWORKS_INFO[itemChainId]
+        const disabled = !isAcceptedTerm || (activeChainIds ? !activeChainIds?.includes(itemChainId) : false)
+        const selected = selectedId === itemChainId && !isWrongNetwork
 
         const imgSrc = (isDarkMode ? iconDark : icon) || icon
         const walletKey =
-          key === ChainId.SOLANA ? walletSolana.walletKey : walletEVM.chainId === key ? walletEVM.walletKey : null
+          itemChainId === ChainId.SOLANA
+            ? walletSolana.walletKey
+            : walletEVM.chainId === itemChainId
+            ? walletEVM.walletKey
+            : null
         return (
-          <MouseoverTooltip style={{ zIndex: Z_INDEXS.MODAL + 1 }} key={key} text={disabled ? disabledMsg : ''}>
+          <MouseoverTooltip
+            style={{ zIndex: Z_INDEXS.MODAL + 1 }}
+            key={itemChainId}
+            text={disabled ? disabledMsg : ''}
+            width="fit-content"
+          >
             <SelectNetworkButton
               key={i}
               padding="0"
-              onClick={() => !selected && onSelect(key)}
+              onClick={() => !selected && onSelect(itemChainId)}
               data-testid="network-button"
               disabled={disabled}
             >

src/components/Header/web3/SelectNetwork.tsx

@@ -7,6 +7,7 @@ import { ReactComponent as DropdownSvg } from 'assets/svg/down.svg'
 import Card from 'components/Card'
 import NetworkModal from 'components/Header/web3/NetworkModal'
 import Row from 'components/Row'
+import { MouseoverTooltip } from 'components/Tooltip'
 import { TutorialIds } from 'components/Tutorial/TutorialSwap/constant'
 import { NativeCurrencies } from 'constants/tokens'
 import { useActiveWeb3React } from 'hooks'
@@ -82,10 +83,11 @@ function SelectNetwork(): JSX.Element | null {
     return `${balanceFixed} ${NativeCurrencies[chainId].symbol}`
   }, [userEthBalance, chainId, networkInfo])
   const walletSupportsChain = useWalletSupportedChains()
+  const disableSelectNetwork = walletSupportsChain.length <= 1
 
-  return (
+  const button = (
     <NetworkCard
-      onClick={() => toggleNetworkModal()}
+      onClick={() => (disableSelectNetwork ? null : toggleNetworkModal())}
       role="button"
       id={TutorialIds.SELECT_NETWORK}
       data-testid="select-network"
@@ -108,6 +110,11 @@ function SelectNetwork(): JSX.Element | null {
       />
     </NetworkCard>
   )
+  if (disableSelectNetwork)
+    return (
+      <MouseoverTooltip text={t`Unable to switch network. Please try it on your wallet`}>{button}</MouseoverTooltip>
+    )
+  return button
 }
 
 export default SelectNetwork

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

@@ -437,8 +437,8 @@ export default function WalletModal() {
       minHeight={false}
       maxHeight={90}
       maxWidth={600}
-      bypassScrollLock={walletView === WALLET_VIEWS.PENDING && pendingWalletKey === 'WALLET_CONNECT'}
-      bypassFocusLock={walletView === WALLET_VIEWS.PENDING && pendingWalletKey === 'WALLET_CONNECT'}
+      bypassScrollLock={walletView === WALLET_VIEWS.PENDING && ['WALLET_CONNECT'].includes(pendingWalletKey)}
+      bypassFocusLock={walletView === WALLET_VIEWS.PENDING && ['WALLET_CONNECT', 'BLOCTO'].includes(pendingWalletKey)}
     >
       <Wrapper>{getModalContent()}</Wrapper>
     </Modal>

src/components/SwapForm/SlippageSettingGroup.tsx

@@ -53,11 +53,9 @@ export default function SlippageSettingGroup({
     chainId === ChainId.MAINNET && walletEVM.isConnected ? (
       <PriceAlertButton onClick={addMevProtectionHandler}>
         <Shield size={14} color={theme.subText} />
-        {upToXXSmall ? null : (
-          <Text color={theme.subText} style={{ whiteSpace: 'nowrap' }}>
-            <Trans>Add MEV Protection</Trans>
-          </Text>
-        )}
+        <Text color={theme.subText} style={{ whiteSpace: 'nowrap' }}>
+          {upToXXSmall ? <Trans>MEV Protection</Trans> : <Trans>Add MEV Protection</Trans>}
+        </Text>
       </PriceAlertButton>
     ) : null
 

src/components/SwapForm/SwapActionButton/index.tsx

@@ -136,10 +136,10 @@ const SwapActionButton: React.FC<Props> = ({
   const toggleApprovalModal = useToggleModal(ApplicationModal.SWAP_APPROVAL)
 
   const handleApproveClick = () => {
-    if (walletKey && ['METAMASK', 'TRUST_WALLET'].includes(walletKey?.toString())) {
-      approveCallback()
-    } else {
+    if (['COIN98', 'BRAVE', 'COINBASE'].includes(walletKey)) {
       toggleApprovalModal()
+    } else {
+      approveCallback()
     }
   }
 

src/components/TransactionConfirmationModal/index.tsx

@@ -260,7 +260,7 @@ export function TransactionErrorContent({
   confirmText?: string
 }) {
   const theme = useTheme()
-  const [showDetail, setShowDetail] = useState<boolean>(true)
+  const [showDetail, setShowDetail] = useState<boolean>(false)
 
   return (
     <Wrapper>

src/components/Web3ReactManager/index.tsx

@@ -17,19 +17,19 @@ export default function Web3ReactManager({ children }: { children: JSX.Element }
   const triedEager = useEagerConnect()
 
   // when there's no account connected, react to logins (broadly speaking) on the injected provider, if it exists
-  useInactiveListener(!triedEager)
+  useInactiveListener(!triedEager.current)
   const dispatch = useDispatch()
   /** On user change network from wallet, update chainId in store, only work on EVM wallet */
   useEffect(() => {
-    if (triedEager && chainIdEVM && chainIdState !== chainIdEVM && active && isEVM) {
+    if (triedEager.current && chainIdEVM && chainIdState !== chainIdEVM && active && isEVM) {
       dispatch(updateChainId(chainIdEVM))
     }
     // Only run on change network from wallet
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chainIdEVM, triedEager, active])
+  }, [chainIdEVM, triedEager.current, active])
 
   // on page load, do nothing until we've tried to connect to the injected connector
-  if (isEVM && !triedEager) {
+  if (isEVM && !triedEager.current) {
     return <LocalLoader />
   }
 

src/constants/connectors/evm.ts

@@ -1,7 +1,9 @@
+import { BloctoConnector } from '@blocto/web3-react-connector'
 import { ChainId } from '@kyberswap/ks-sdk-core'
 import { OPTIONAL_EVENTS } from '@walletconnect/ethereum-provider'
 import { CoinbaseWallet } from '@web3-react/coinbase-wallet'
 import { initializeConnector } from '@web3-react/core'
+import { GnosisSafe } from '@web3-react/gnosis-safe'
 import { MetaMask } from '@web3-react/metamask'
 import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2'
 
@@ -16,10 +18,21 @@ import {
 } from 'constants/networks'
 
 export const [injected, injectedHooks] = initializeConnector<MetaMask>(actions => new MetaMask({ actions }))
+export const [rabby, rabbyHooks] = initializeConnector<MetaMask>(actions => new MetaMask({ actions }))
+export const [krystal, krystalHooks] = initializeConnector<MetaMask>(actions => new MetaMask({ actions }))
 export const [metaMask, metamaskHooks] = initializeConnector<MetaMask>(actions => new MetaMask({ actions }))
+export const [gnosisSafe, gnosisSafeHooks] = initializeConnector<GnosisSafe>(actions => new GnosisSafe({ actions }))
 export const [coin98, coin98Hooks] = initializeConnector<MetaMask>(actions => new MetaMask({ actions }))
 export const [brave, braveHooks] = initializeConnector<MetaMask>(actions => new MetaMask({ actions }))
-export const [trustWallet, trustWalletHooks] = initializeConnector<MetaMask>(actions => new MetaMask({ actions }))
+export const [trust, trustHooks] = initializeConnector<MetaMask>(actions => new MetaMask({ actions }))
+export const [blocto, bloctoHooks] = initializeConnector<BloctoConnector>(
+  actions =>
+    new BloctoConnector({
+      actions,
+      options: { chainId: ChainId.MATIC, rpc: NETWORKS_INFO[ChainId.MATIC].defaultRpcUrl },
+    }),
+)
+export const [bloctoInject, bloctoInjectHooks] = initializeConnector<MetaMask>(actions => new MetaMask({ actions }))
 
 const darkmode = Boolean(window.matchMedia('(prefers-color-scheme: dark)'))
 export const [walletConnectV2, walletConnectV2Hooks] = initializeConnector<WalletConnectV2>(
@@ -50,7 +63,7 @@ export const [walletConnectV2, walletConnectV2Hooks] = initializeConnector<Walle
             '--w3m-accent-color': '#31CB9E',
             '--w3m-accent-fill-color': '#222222',
             '--w3m-color-bg-1': '#0F0F0F',
-          },
+          } as any,
         },
         metadata: {
           name: 'Kyberswap',