Merge branch 'main' into support-video-ann

.github/workflows/schedule.yml

@@ -12,7 +12,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        network: ['Ethereum', 'Arbitrum', 'Optimism', 'Avalanche', 'BNB']
+        network: ['Ethereum', 'Arbitrum', 'Optimism', 'Avalanche', 'BNB Chain']
     steps:
       - name: Trigger Code Checkout
         uses: actions/checkout@v3

.nvmrc

@@ -1 +1 @@
-v18.15.0
+v20.9.0

cypress/e2e/pages/cross-chain.po.cy.ts

@@ -0,0 +1,50 @@
+import { NETWORK_LIST } from "../selectors/constants.cy"
+import { CrossChainLocators, NetworkLocators } from "../selectors/selectors.cy"
+
+export const CrossChain = {
+
+    closeUnderstandPopup() {
+        cy.get(CrossChainLocators.btnUnderstand).click()
+    },
+
+    selectNetworkIn(networkName: string) {
+        cy.get(CrossChainLocators.btnNetworkIn).click()
+        cy.get(NetworkLocators.btnNetwork).contains(networkName).click({ force: true })
+
+    },
+
+    selectNetworkOut(networkName: string) {
+        cy.get(CrossChainLocators.btnNetworkOut).click()
+        cy.get(NetworkLocators.btnNetwork).contains(networkName).click({ force: true })
+    },
+
+    changeNetwork(oldNetwork: string[]) {
+        let random = 0
+        do {
+            random = Math.floor(Math.random() * NETWORK_LIST.length)
+        } while (oldNetwork.includes(NETWORK_LIST[random]) === true)
+
+        return NETWORK_LIST[random]
+    },
+
+    checkLoadedPage() {
+        return cy.get(CrossChainLocators.rechartsSurface, { timeout: 20000 }).should(() => { }).then($obj => {
+            if ($obj.length > 0) {
+                return true
+            }
+            return false
+        })
+    },
+
+    getCurrentNetworkIn() {
+        return cy.get(CrossChainLocators.btnNetworkIn).invoke('text').then(network => {
+            return network
+        })
+    },
+
+    getCurrentNetworkOut() {
+        return cy.get(CrossChainLocators.btnNetworkOut).invoke('text').then(network => {
+            return network
+        })
+    },
+}

cypress/e2e/pages/limit-order.po.cy.ts

@@ -5,6 +5,19 @@ export interface myCallbackType<T> {
 }
 export const LimitOder = {
 
+    checkGetStartedDisplay() {
+        return cy.get(LimitOrderLocators.btnGetStarted, { timeout: 10000 }).should(() => { }).then($obj => {
+            if ($obj.length > 0) {
+                return true
+            }
+            return false
+        })
+    },
+
+    clickGetStarted() {
+        cy.get(LimitOrderLocators.btnGetStarted, { timeout: 10000 }).click({ force: true })
+    },
+
     selectTokenSell(): TokenCatalog {
         cy.selectToken(LimitOrderLocators.dropdownTokenSell)
         return new TokenCatalog()

cypress/e2e/pages/swap-page.po.cy.ts

@@ -1,4 +1,4 @@
-import { HeaderLocators, LimitOrderLocators, NetworkLocators, SwapPageLocators, TokenCatalogLocators, WalletLocators } from "../selectors/selectors.cy"
+import { CrossChainLocators, HeaderLocators, LimitOrderLocators, NetworkLocators, SwapPageLocators, TokenCatalogLocators, WalletLocators } from "../selectors/selectors.cy"
 
 export interface myCallbackType<T> {
     (myArgument: T): void
@@ -41,6 +41,10 @@ export const SwapPage = {
         cy.get(LimitOrderLocators.btnLimit).click()
     },
 
+    goToCrossChain() {
+        cy.get(CrossChainLocators.btnCrossChain).click()
+    },
+
     goToFarmPage() {
         cy.get(HeaderLocators.dropdownEarn).click({ force: true })
         cy.get(HeaderLocators.lblFarms).click({ force: true })

cypress/e2e/selectors/constants.cy.ts

@@ -19,6 +19,8 @@ export const TOKEN_SYMBOLS = {
     'BNB': ['RICE', 'DAI', 'USDT', 'USDC', 'MAI']
 }
 
+export const NETWORK_LIST = ['Ethereum', 'Arbitrum', 'Optimism', 'Avalanche', 'BNB Chain', 'Polygon PoS', 'Fantom', 'Linea', 'Base']
+
 export const UNWHITELIST_TOKENS = {
     "Ethereum":
         [

cypress/e2e/selectors/selectors.cy.ts

@@ -28,7 +28,16 @@ export const LimitOrderLocators = {
   btnLimit: '[data-testid=limit-button]',
   txtSellingRate: '[data-testid=input-selling-rate]',
   lblBalanceIn: '[data-testid=limit-order-input-tokena] [data-testid=balance]',
-  lblErrorMessage: '[data-testid=error-message]'
+  lblErrorMessage: '[data-testid=error-message]',
+  btnGetStarted: '[data-testid=get-started-button]'
+}
+
+export const CrossChainLocators = {
+  btnCrossChain: '[data-testid=cross-chain-tab]',
+  btnNetworkIn: '[data-testid=swap-currency-input] [data-testid=network-button]',
+  btnNetworkOut: '[data-testid=swap-currency-output] [data-testid=network-button]',
+  btnUnderstand: '[data-testid=understand-button]',
+  rechartsSurface: '.recharts-surface' //it's in the library so don't use data-testid
 }
 
 export const WalletLocators = {
@@ -40,7 +49,7 @@ export const WalletLocators = {
 
 export const NetworkLocators = {
   btnSelectNetwork: '[data-testid=select-network]',
-  btnNetwork: '[data-testid=network-button]',
+  btnNetwork: '[data-testid=network-list]',
 }
 
 export const HeaderLocators = {

cypress/e2e/specs/connect-wallet.e2e.cy.ts

@@ -11,13 +11,13 @@ describe('Metamask Extension tests', { tags: TAG.regression }, () => {
         SwapPage.connectWallet()
     })
 
-    it.skip('Redirects to swap page when a user has already connected a wallet', () => {
+    it('Redirects to swap page when a user has already connected a wallet', () => {
         cy.acceptMetamaskAccess()
         SwapPage.getStatusConnectedWallet()
         cy.url().should('include', '/swap')
     })
 
-    it.skip('Should approve permission to switch network', () => {
+    it('Should approve permission to switch network', () => {
         if (NETWORK !== DEFAULT_NETWORK) {
             SwapPage.getStatusConnectedWallet()
             wallet.selectNetwork(NETWORK)

cypress/e2e/specs/cross-chain.e2e.cy.ts

@@ -0,0 +1,37 @@
+import { CrossChain } from "../pages/cross-chain.po.cy"
+import { SwapPage } from "../pages/swap-page.po.cy"
+import { DEFAULT_URL, NETWORK, TAG } from "../selectors/constants.cy"
+
+
+describe(`Cross-chain on ${NETWORK}`, { tags: TAG.regression }, () => {
+    beforeEach(() => {
+        SwapPage.open(DEFAULT_URL)
+        SwapPage.goToCrossChain()
+        CrossChain.checkLoadedPage().then((checked) => {
+            if (checked === true) {
+                CrossChain.closeUnderstandPopup()
+            }
+        })
+    })
+
+    describe('Select network', () => {
+        it('The network should be changed successfully', () => {
+            const networkIn = CrossChain.changeNetwork([NETWORK])
+            CrossChain.selectNetworkIn(networkIn)
+            CrossChain.getCurrentNetworkIn().then((currentNetworkIn) => {
+                expect(currentNetworkIn).to.equal(networkIn)
+            })
+
+            CrossChain.getCurrentNetworkOut().then((currentNetworkOut) => {
+                const networkOut = CrossChain.changeNetwork([networkIn, currentNetworkOut])
+                cy.wait(1000)
+                CrossChain.selectNetworkOut(networkOut)
+                CrossChain.getCurrentNetworkOut().then((currentNetworkOut) => {
+                    expect(currentNetworkOut).to.equal(networkOut)
+                })
+
+            })
+        })
+
+    })
+})

cypress/e2e/specs/limit-order.e2e.cy.ts

@@ -4,14 +4,17 @@ import { DEFAULT_URL, NETWORK, NORESULTS_TEXT, NOTOKENS_TEXT, TAG, TOKEN_SYMBOLS
 
 const tokenSymbols = TOKEN_SYMBOLS[NETWORK]
 
-
 const tokenCatalog = new TokenCatalog();
 
-
 describe(`Limit Order on ${NETWORK}`, { tags: TAG.regression }, () => {
     beforeEach(() => {
         SwapPage.open(DEFAULT_URL)
         SwapPage.goToLimitOrder()
+        LimitOder.checkGetStartedDisplay().then((checked) => {
+            if (checked === true) {
+                LimitOder.clickGetStarted()
+            }
+        })
     })
 
     describe('Add/remove/select token with favorite tokens list', () => {

cypress/support/connectWalletCommands.ts

@@ -12,6 +12,7 @@ declare global {
 }
 
 Cypress.Commands.add('connectWallet', () => {
-  cy.get(WalletLocators.chkAcceptTerm).click()
+  // feature changed => temporary comment
+  // cy.get(WalletLocators.chkAcceptTerm).click()
   cy.get(WalletLocators.btnMetaMask).click()
 })

package.json

@@ -79,7 +79,6 @@
     "axios": "1.2.1",
     "base64-js": "^1.5.1",
     "buffer": "^6.0.3",
-    "cids": "^1.1.9",
     "crypto-js": "4.1.1",
     "d3": "^7.6.1",
     "dayjs": "^1.11.6",
@@ -97,8 +96,6 @@
     "lightweight-charts": "^3.3.0",
     "memoize-one": "^6.0.0",
     "mixpanel-browser": "^2.45.0",
-    "multicodec": "^2.1.3",
-    "multihashes": "^3.1.2",
     "node-vibrant": "^3.1.6",
     "numeral": "^2.0.6",
     "patch-package": "^7.0.0",
@@ -157,7 +154,6 @@
     "@types/d3": "^7.1.0",
     "@types/dompurify": "^3.0.3",
     "@types/mixpanel-browser": "^2.38.0",
-    "@types/multicodec": "^1.0.0",
     "@types/node": "^20.8.8",
     "@types/numeral": "^2.0.0",
     "@types/react": "^18.0.15",
@@ -208,4 +204,4 @@
     "@lingui/core": "3.14.0",
     "@lingui/conf": "3.16.0"
   }
-}
+}

src/components/CurrencyInputPanel/CurrencyInputPanelBridge.tsx

@@ -40,6 +40,7 @@ interface CurrencyInputPanelBridgeProps {
   usdValue?: string
   isCrossChain?: boolean
   tooltipNotSupportChain?: string
+  dataTestId?: string
 }
 
 const noop = () => {
@@ -80,6 +81,7 @@ export default function CurrencyInputPanelBridge({
   usdValue,
   isCrossChain,
   tooltipNotSupportChain,
+  dataTestId,
 }: CurrencyInputPanelBridgeProps) {
   const [modalOpen, setModalOpen] = useState(false)
   const { account } = useActiveWeb3React()
@@ -111,7 +113,7 @@ export default function CurrencyInputPanelBridge({
 
   return (
     <div style={{ width: '100%' }}>
-      <InputPanel id={id}>
+      <InputPanel id={id} data-testid={dataTestId}>
         <Container hideInput={false} selected={false} error={error}>
           <Flex justifyContent="space-between" fontSize="12px" marginBottom="12px" alignItems="center">
             <SelectNetwork

src/components/CurrencyLogo/index.tsx

@@ -1,14 +1,11 @@
-import { ChainId, Currency } from '@kyberswap/ks-sdk-core'
+import { Currency } from '@kyberswap/ks-sdk-core'
 import React, { memo, useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 
 import Logo from 'components/Logo'
-import { ETHER_ADDRESS } from 'constants/index'
-import { NETWORKS_INFO } from 'constants/networks'
-import { useAllTokens } from 'hooks/Tokens'
 import useHttpLocations from 'hooks/useHttpLocations'
 import { WrappedTokenInfo } from 'state/lists/wrappedTokenInfo'
-import { getTokenLogoURL } from 'utils'
+import { getNativeTokenLogo, getTokenLogoURL } from 'utils'
 import { getProxyTokenLogo } from 'utils/tokenInfo'
 
 const StyledNativeCurrencyLogo = styled.img<{ size: string }>`
@@ -27,11 +24,6 @@ const StyledLogo = styled(Logo)<{ size: string }>`
   object-fit: contain;
 `
 
-export const useGetNativeTokenLogo = (chainId: ChainId | undefined) => {
-  const whitelistTokens = useAllTokens(false, chainId)
-  return whitelistTokens[ETHER_ADDRESS]?.logoURI || (chainId ? NETWORKS_INFO[chainId].nativeToken.logo : '')
-}
-
 function CurrencyLogo({
   currency,
   size = '24px',
@@ -56,7 +48,6 @@ function CurrencyLogo({
 
   const logoURI = currency instanceof WrappedTokenInfo ? currency?.logoURI : undefined
   const uriLocations = useHttpLocations(wrapWithProxy(logoURI))
-  const nativeLogo = useGetNativeTokenLogo(currency?.chainId)
 
   const srcs: string[] = useMemo(() => {
     if (currency?.isNative) return []
@@ -72,7 +63,14 @@ function CurrencyLogo({
   }, [currency, logoURI, uriLocations, wrapWithProxy])
 
   if (currency?.isNative) {
-    return <StyledNativeCurrencyLogo src={nativeLogo} size={size} style={style} alt={`${currency.symbol}Logo`} />
+    return (
+      <StyledNativeCurrencyLogo
+        src={getNativeTokenLogo(currency?.chainId)}
+        size={size}
+        style={style}
+        alt={`${currency.symbol}Logo`}
+      />
+    )
   }
 
   return <StyledLogo size={size} srcs={srcs} alt={`${currency?.symbol ?? 'token'} logo`} style={style} />

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

@@ -290,6 +290,7 @@ export default function NetworkModal({
               }
             }}
             id={CHAINS_DROPZONE_ID}
+            data-testid="network-list"
             style={{ position: 'relative', minHeight: '50px' }}
           >
             <DropzoneOverlay show={dropIdDraggingOver === CHAINS_DROPZONE_ID} text={t`Remove from favorite`} />