Merge branch 'main' of github.com:KyberNetwork/kyberswap-interface in…

…to feat/zkevm

.github/workflows/release.yaml

@@ -165,3 +165,4 @@ jobs:
           tag_name: ${{ env.VERSION_TAG }}
           prerelease: false
           title: 'KyberSwap Interface - ${{ env.VERSION_TAG }}'
+          generate_release_notes: true

src/components/Collapse.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties, ReactNode, useState } from 'react'
 import { ChevronDown } from 'react-feather'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 const ItemWrapper = styled.div`
   position: relative;
@@ -14,7 +14,7 @@ const Header = styled.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
-
+  user-select: none;
   cursor: pointer;
 `
 
@@ -39,11 +39,17 @@ const ArrowWrapper = styled.div`
   }
 `
 
-const ContentWrapper = styled.div`
+const ContentWrapper = styled.div<{ $hasAnim?: boolean; $maxHeight?: string }>`
   width: 100%;
-
+  overflow: hidden;
+  ${({ $hasAnim, $maxHeight }) =>
+    $hasAnim &&
+    css`
+      transition: max-height 500ms ease;
+      max-height: ${$maxHeight};
+    `};
   &[data-expanded='false'] {
-    display: none;
+    max-height: 0;
   }
 `
 
@@ -56,6 +62,11 @@ type Props = {
   onExpand?: () => void
   className?: string
   arrowComponent?: ReactNode
+  headerStyle?: CSSProperties
+  headerBorderRadius?: string
+  arrowStyle?: CSSProperties
+  animation?: boolean
+  maxHeight?: string
 }
 
 export const CollapseItem: React.FC<Props> = ({
@@ -65,20 +76,35 @@ export const CollapseItem: React.FC<Props> = ({
   expandedOnMount = false,
   style = {},
   className,
+  headerStyle,
+  headerBorderRadius,
+  arrowStyle,
+  animation = false,
+  maxHeight,
 }) => {
   const [isExpanded, setExpanded] = useState(expandedOnMount)
 
   return (
     <ItemWrapper style={style} className={className}>
       <Header
+        style={{
+          ...headerStyle,
+          ...(headerBorderRadius !== undefined
+            ? { borderRadius: isExpanded ? `${headerBorderRadius} ${headerBorderRadius} 0 0` : headerBorderRadius }
+            : {}),
+        }}
         onClick={() => {
           setExpanded(e => !e)
         }}
       >
         {header}
-        <ArrowWrapper data-expanded={isExpanded}>{arrowComponent || <ChevronDown />}</ArrowWrapper>
+        <ArrowWrapper data-expanded={isExpanded} style={arrowStyle}>
+          {arrowComponent || <ChevronDown />}
+        </ArrowWrapper>
       </Header>
-      <ContentWrapper data-expanded={isExpanded}>{children}</ContentWrapper>
+      <ContentWrapper data-expanded={isExpanded} $hasAnim={animation} $maxHeight={maxHeight}>
+        {children}
+      </ContentWrapper>
     </ItemWrapper>
   )
 }

src/components/CurrencyLogo/index.tsx

@@ -14,6 +14,7 @@ import { getProxyTokenLogo } from 'utils/tokenInfo'
 const StyledNativeCurrencyLogo = styled.img<{ size: string }>`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
+  min-width: ${({ size }) => size};
   box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
   border-radius: 24px;
 `

src/components/EarningAreaChart/index.tsx

@@ -57,16 +57,17 @@ const subscriptMap: { [key: string]: string } = {
 }
 
 const formatter = (value: string) => {
-  const num = Number(value)
+  const num = parseFloat(value)
   const numberOfZero = -Math.floor(Math.log10(num) + 1)
 
   if (num > 0 && num < 1 && numberOfZero > 2) {
-    const temp = Number(toFixed(num).split('.')[1])
+    const temp = Number(toFixed(num).split('.')[1]).toString()
+
     return `$0.0${numberOfZero
       .toString()
       .split('')
       .map(item => subscriptMap[item])
-      .join('')}${temp > 10 ? (temp / 10).toFixed(0) : temp}`
+      .join('')}${temp.substring(0, 2)}`
   }
 
   const formatter = Intl.NumberFormat('en-US', {
@@ -108,7 +109,15 @@ const EarningAreaChart: React.FC<Props> = ({ data, setHoverValue = EMPTY_FUNCTIO
             <stop offset="100%" stopColor={theme.primary} stopOpacity={0} />
           </linearGradient>
         </defs>
-        <XAxis angle={-30} dataKey="date" fontSize="12px" axisLine={false} tickLine={false} stroke={theme.subText} />
+        <XAxis
+          angle={-30}
+          dataKey="date"
+          fontSize="12px"
+          axisLine={false}
+          tickLine={false}
+          stroke={theme.subText}
+          interval={data.length == 7 ? 0 : data.length == 30 ? 1 : undefined}
+        />
         <YAxis
           fontSize="12px"
           axisLine={false}

src/components/KyberAITokenBanner/index.tsx

@@ -14,8 +14,9 @@ import CurrencyLogo from 'components/CurrencyLogo'
 import ApeIcon from 'components/Icons/ApeIcon'
 import Row, { RowBetween, RowFit } from 'components/Row'
 import { APP_PATHS } from 'constants/index'
-import { KNC, NativeCurrencies, STABLE_COINS_ADDRESS } from 'constants/tokens'
+import { KNC, NativeCurrencies } from 'constants/tokens'
 import { useActiveWeb3React } from 'hooks'
+import { useStableCoins } from 'hooks/Tokens'
 import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
 import useTheme from 'hooks/useTheme'
 import KyberScoreMeter from 'pages/TrueSightV2/components/KyberScoreMeter'
@@ -44,6 +45,8 @@ const KyberAITokenBanner = ({
   const token0 = currencyIn?.wrapped
   const token1 = currencyOut?.wrapped
 
+  const { isStableCoin } = useStableCoins(chainId)
+
   const { data: tokenInputOverview } = useTokenDetailQuery(
     { address: token0?.address, chain },
     { skip: !token0?.address || !account || !isWhiteList || !chain, refetchOnMountOrArgChange: true },
@@ -87,11 +90,7 @@ const KyberAITokenBanner = ({
 
   if (!token && !staticMode) return null
 
-  if (
-    staticMode &&
-    STABLE_COINS_ADDRESS[chainId].some(value => value.toLowerCase() === currencyIn?.wrapped.address.toLowerCase())
-  )
-    return null
+  if (staticMode && isStableCoin(currencyIn?.wrapped.address.toLowerCase())) return null
   const staticModeCurrency = !currencyIn || KNC[chainId].equals(currencyIn) ? NativeCurrencies[chainId] : currencyIn
   const color = staticMode ? theme.primary : calculateValueToColor(token?.kyberScore || 0, theme)
   return (

src/components/Logo/index.tsx

@@ -65,7 +65,7 @@ export function TokenLogoWithChain(data: any) {
         style={{
           width: size,
           height: size,
-          borderRadius: '50%',
+          borderRadius: '4px',
         }}
       />
       <NetworkLogo

src/components/PoolList/index.tsx

@@ -15,8 +15,8 @@ import ListItem from 'components/PoolList/ListItem'
 import ShareModal from 'components/ShareModal'
 import { ClickableText } from 'components/YieldPools/styleds'
 import { AMP_HINT, AMP_LIQUIDITY_HINT, MAX_ALLOW_APY } from 'constants/index'
-import { STABLE_COINS_ADDRESS } from 'constants/tokens'
 import { useActiveWeb3React } from 'hooks'
+import { useStableCoins } from 'hooks/Tokens'
 import { SelectPairInstructionWrapper } from 'pages/Pools/styleds'
 import { ApplicationModal } from 'state/application/actions'
 import { useModalOpen, useOpenModal } from 'state/application/hooks'
@@ -309,6 +309,7 @@ const PoolList = ({ currencies, searchValue, isShowOnlyActiveFarmPools, onlyShow
   const { data: farms } = useActiveAndUniqueFarmsData()
 
   const [currentPage, setCurrentPage] = useState(1)
+  const { stableCoins } = useStableCoins(chainId)
   const sortedFilteredSubgraphPoolsData = useMemo(() => {
     let res = [...subgraphPoolsData]
 
@@ -347,7 +348,7 @@ const PoolList = ({ currencies, searchValue, isShowOnlyActiveFarmPools, onlyShow
     })
 
     if (onlyShowStable) {
-      const stableList = isEVM ? STABLE_COINS_ADDRESS[chainId]?.map(item => item.toLowerCase()) || [] : []
+      const stableList = isEVM ? stableCoins?.map(item => item.address.toLowerCase()) || [] : []
       res = res.filter(poolData => {
         return (
           stableList.includes(poolData.token0.id.toLowerCase()) && stableList.includes(poolData.token1.id.toLowerCase())
@@ -364,8 +365,8 @@ const PoolList = ({ currencies, searchValue, isShowOnlyActiveFarmPools, onlyShow
     onlyShowStable,
     farms,
     searchValue,
-    chainId,
     isEVM,
+    stableCoins,
   ])
 
   const startIndex = (currentPage - 1) * ITEM_PER_PAGE

src/components/SearchModal/CurrencySearch.tsx

@@ -385,13 +385,13 @@ export function CurrencySearch({
   const removeImportedToken = useCallback(
     (token: Token) => {
       removeToken(chainId, token.address)
-
-      toggleFavoriteToken({
-        chainId,
-        address: token.address,
-      })
+      if (favoriteTokens?.some(el => el.toLowerCase() === token.address.toLowerCase()))
+        toggleFavoriteToken({
+          chainId,
+          address: token.address,
+        })
     },
-    [chainId, toggleFavoriteToken, removeToken],
+    [chainId, toggleFavoriteToken, removeToken, favoriteTokens],
   )
 
   const removeAllImportToken = () => {

src/components/SubscribeButton/index.tsx

@@ -38,7 +38,9 @@ const SubscribeBtn = styled(ButtonPrimary)<{
     background: ${({ bgColor }) => bgColor};
   }
   ${({ iconOnly, bgColor }) => iconOnly && cssSubscribeBtnSmall(bgColor)};
-  ${({ theme, bgColor }) => theme.mediaWidth.upToExtraSmall`
+  ${({ theme, bgColor, iconOnly }) =>
+    iconOnly !== false &&
+    theme.mediaWidth.upToExtraSmall`
    ${cssSubscribeBtnSmall(bgColor)}
   `}
 `
@@ -48,13 +50,15 @@ const ButtonText = styled(Text)<{ iconOnly?: boolean }>`
   font-weight: 500;
   margin-left: 6px !important;
   ${({ iconOnly }) => iconOnly && `display: none`};
-  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+  ${({ theme, iconOnly }) =>
+    iconOnly !== false &&
+    theme.mediaWidth.upToExtraSmall`
     display: none;
   `}
 `
 export default function SubscribeNotificationButton({
   subscribeTooltip,
-  iconOnly = false,
+  iconOnly,
   trackingEvent,
   onClick,
   topicId,

src/components/SwapForm/hooks/useCheckStablePairSwap.ts

@@ -1,15 +1,10 @@
 import { Currency } from '@kyberswap/ks-sdk-core'
 
-import { STABLE_COINS_ADDRESS } from 'constants/tokens'
+import { useStableCoins } from 'hooks/Tokens'
 
 const useCheckStablePairSwap = (currencyIn: Currency | undefined, currencyOut: Currency | undefined) => {
-  const isStablePairSwap = Boolean(
-    currencyIn &&
-      currencyOut &&
-      STABLE_COINS_ADDRESS[currencyIn.chainId].includes(currencyIn.wrapped.address) &&
-      STABLE_COINS_ADDRESS[currencyOut.chainId].includes(currencyOut.wrapped.address),
-  )
-
+  const { isStableCoin } = useStableCoins(currencyIn?.chainId)
+  const isStablePairSwap = isStableCoin(currencyIn?.wrapped?.address) && isStableCoin(currencyOut?.wrapped?.address)
   return isStablePairSwap
 }
 

src/components/TradeRouting/index.tsx

@@ -1,4 +1,4 @@
-import { ChainId, Currency, CurrencyAmount } from '@kyberswap/ks-sdk-core'
+import { ChainId, Currency, CurrencyAmount, Token } from '@kyberswap/ks-sdk-core'
 import React, { memo, useCallback, useEffect, useRef } from 'react'
 import ScrollContainer from 'react-indiana-drag-scroll'
 
@@ -25,6 +25,7 @@ import {
   StyledWrapToken,
 } from 'components/TradeRouting/styled'
 import { useActiveWeb3React } from 'hooks'
+import { useCurrencyV2 } from 'hooks/Tokens'
 import { useAllDexes } from 'state/customizeDexes/hooks'
 import { getEtherscanLink, isAddress } from 'utils'
 import { SwapRouteV2 } from 'utils/aggregationRouting'
@@ -67,14 +68,7 @@ const RouteRow = ({ route, chainId, backgroundColor }: RouteRowProps) => {
             return (
               <React.Fragment key={id}>
                 <StyledHop>
-                  <StyledToken
-                    style={{ marginRight: 0 }}
-                    href={getEtherscanLink(chainId, token?.address, 'token')}
-                    target="_blank"
-                  >
-                    <CurrencyLogo currency={token} size="16px" />
-                    <span>{token?.symbol}</span>
-                  </StyledToken>
+                  <TokenRoute token={token} />
                   {Array.isArray(subRoute)
                     ? subRoute.map(pool => {
                         const dex = getDexInfoByPool(pool, allDexes)
@@ -202,4 +196,18 @@ const Routing = ({ tradeComposition, maxHeight, inputAmount, outputAmount, curre
   )
 }
 
+const TokenRoute = ({ token }: { token: Token }) => {
+  const currency = useCurrencyV2(token.address)
+  return (
+    <StyledToken
+      style={{ marginRight: 0 }}
+      href={getEtherscanLink(token.chainId, token?.address, 'token')}
+      target="_blank"
+    >
+      <CurrencyLogo currency={currency} size="16px" />
+      <span>{currency?.symbol}</span>
+    </StyledToken>
+  )
+}
+
 export default memo(Routing)