Merge branch 'main' into kyberai-ui-improvement

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/TabButton.tsx

@@ -0,0 +1,58 @@
+import { forwardRef } from 'react'
+import styled, { CSSProperties, css } from 'styled-components'
+
+const ButtonWrapper = styled.div<{ active?: boolean; separator?: boolean }>`
+  font-size: 12px;
+  line-height: 16px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  flex: 1;
+  box-sizing: border-box;
+  cursor: pointer;
+  user-select: none;
+  ${({ theme, separator, active }) =>
+    separator &&
+    !active &&
+    css`
+      position: relative;
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        height: 16px;
+        border: 1px solid ${theme.border};
+      }
+    `}
+  ${({ theme, active }) =>
+    active
+      ? css`
+          color: ${theme.primary};
+          background-color: ${theme.primary + '40'};
+          box-shadow: inset 0 -2px 0 0 ${theme.primary};
+        `
+      : css`
+          color: ${theme.subText};
+          background-color: ${theme.background};
+        `}
+
+  :hover {
+    filter: brightness(1.2);
+  }
+`
+
+type Props = { text?: string; active?: boolean; onClick?: () => void; style?: CSSProperties; separator?: boolean }
+const TabButton = forwardRef<HTMLDivElement, Props>(function TabButton(
+  { text, active, onClick, style, separator },
+  ref,
+) {
+  return (
+    <ButtonWrapper active={active} onClick={onClick} style={style} separator={separator} ref={ref}>
+      {text}
+    </ButtonWrapper>
+  )
+})
+
+export default TabButton

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/components/swapv2/LimitOrder/ListOrder/TableHeader.tsx

@@ -19,7 +19,7 @@ const Header = styled(ItemWrapper)`
     border-radius: 0px;
     padding-left: 30px;
     margin-left: -30px;
-    width: 110vw;
+    width: calc(100vw + 14px);
   `};
 `