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

…to refactor/rpc-dynamic-farm

.github/workflows/cypress.yml

@@ -106,6 +106,12 @@ jobs:
         env:
           DISPLAY: :0.0
 
+      - name: Create env file
+        run: |
+          touch .env
+          echo ENV=${ENV} > .env
+          echo CYPRESS_BASE_URL='http://127.0.0.1:4173/' > .env
+
       - name: Run Cypress Test
         run: |+
           #!/bin/bash

.github/workflows/schedule.yml

@@ -11,7 +11,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        network: ['Ethereum', 'Arbitrum','Optimism', 'Avalanche', 'BNB']
+        network: ['Ethereum', 'Arbitrum', 'Optimism', 'Avalanche', 'BNB']
     steps:
       - name: Trigger Code Checkout
         uses: actions/checkout@v3
@@ -30,9 +30,9 @@ jobs:
 
       - name: Install linux deps
         run: |
-            sudo apt-get install --no-install-recommends -y \
-            fluxbox \
-            xvfb
+          sudo apt-get install --no-install-recommends -y \
+          fluxbox \
+          xvfb
 
       - name: Install cypress
         run: yarn cypress install --force
@@ -43,31 +43,27 @@ jobs:
         env:
           DISPLAY: :0.0
 
+      - name: Create env file
+        run: |
+          touch .env
+          echo ENV=${ENV} > .env
+          echo GITHUB_RUN_ID=${GITHUB_RUN_ID} > .env
+          echo CORE_PUSH_GATEWAY_URL=${{ secrets.CORE_PUSH_GATEWAY_URL }} > .env
+          echo CYPRESS_BASE_URL='https://kyberswap.com/' > .env
+
       - name: Run Cypress Test
         run: |+
           #!/bin/bash
           yarn test-schedule -e grepTags=regression,NETWORK=${{ matrix.network }}
         env:
-            DISPLAY: :0.0
-
-      - name: Notify on failure
-        if: ${{ failure() }}
-        uses: rtCamp/action-slack-notify@v2
-        env:
-            SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
-            SLACK_CHANEL: automation-test-bot
-            SLACK_COLOR: ${{ job.status }} # or a specific color like 'good' or '#ff00ff'
-            SLACK_ICON: https://icon-library.com/images/star-wars-icon-png/star-wars-icon-png-16.jpg?size=48
-            SLACK_TITLE: E2E Test ${{inputs.BASE_URL}}
-            SLACK_USERNAME: autoBot
-            SLACK_LINK_NAMES: true
+          DISPLAY: :0.0
 
       - name: Archive e2e artifacts
         uses: actions/upload-artifact@3cea5372237819ed00197afe530f5a7ea3e805c8
         if: always()
         with:
-            name: e2e-artifacts
-            path: |
-              cypress/videos
-              cypress/screenshots
+          name: e2e-artifacts
+          path: |
+            cypress/videos
+            cypress/screenshots
         continue-on-error: true

cypress.config.ts

@@ -1,8 +1,10 @@
 import synpressPlugins from '@synthetixio/synpress/plugins'
 import { defineConfig } from 'cypress'
+import client from 'prom-client'
+
+require('dotenv').config()
 
 export default defineConfig({
-  projectId: '4x4jf8',
   component: {
     devServer: {
       framework: 'create-react-app',
@@ -22,7 +24,129 @@ export default defineConfig({
       // eslint-disable-next-line @typescript-eslint/no-var-requires
       require('@cypress/grep/src/plugin')(config)
       synpressPlugins(on, config)
+      console.log('baseURL: ', process.env.CYPRESS_BASE_URL)
+      if (process.env.CYPRESS_BASE_URL === 'https://kyberswap.com/') {
+        on('after:run', async results => {
+          if (results) {
+            const register = new client.Registry()
+            const prefix = 'e2e_cypress'
+            const suite = new client.Counter({
+              name: `${prefix}_suite`,
+              help: `${prefix}_suite`,
+              labelNames: ['buildId', 'result', 'baseName', 'duration', 'chain'] as const,
+            })
+            suite.reset()
+            const { totalPassed, totalFailed, totalTests, totalDuration, runs } = results
+            runs.forEach(run => {
+              const { stats, spec } = run
+              const { tests, passes, pending, failures, duration } = stats
+              const { baseName } = spec
+              suite
+                .labels({
+                  buildId: `${process.env.GITHUB_RUN_ID}`,
+                  result: 'failed',
+                  baseName: baseName,
+                  duration: duration,
+                  chain: config.env.NETWORK,
+                })
+                .inc(failures)
+
+              suite
+                .labels({
+                  buildId: `${process.env.GITHUB_RUN_ID}`,
+                  result: 'passed',
+                  baseName: baseName,
+                  duration: duration,
+                  chain: config.env.NETWORK,
+                })
+                .inc(passes)
+
+              suite
+                .labels({
+                  buildId: `${process.env.GITHUB_RUN_ID}`,
+                  result: 'pending',
+                  baseName: baseName,
+                  duration: duration,
+                  chain: config.env.NETWORK,
+                })
+                .inc(pending)
+              suite
+                .labels({
+                  buildId: `${process.env.GITHUB_RUN_ID}`,
+                  result: 'tests',
+                  baseName: baseName,
+                  duration: duration,
+                  chain: config.env.NETWORK,
+                })
+                .inc(tests)
+            })
+
+            suite
+              .labels({
+                buildId: `${process.env.GITHUB_RUN_ID}`,
+                result: 'passed',
+                baseName: 'All Specs',
+                duration: totalDuration,
+                chain: config.env.NETWORK,
+              })
+              .inc(totalPassed)
+
+            suite
+              .labels({
+                buildId: `${process.env.GITHUB_RUN_ID}`,
+                result: 'failed',
+                baseName: 'All Specs',
+                duration: totalDuration,
+                chain: config.env.NETWORK,
+              })
+              .inc(totalFailed)
+            suite
+              .labels({
+                buildId: `${process.env.GITHUB_RUN_ID}`,
+                result: 'total',
+                baseName: 'All Specs',
+                duration: totalDuration,
+                chain: config.env.NETWORK,
+              })
+              .inc(totalTests)
+
+            const testPass = new client.Counter({
+              name: `${prefix}_test_passed`,
+              help: `${prefix}_pass`,
+              labelNames: ['buildId', 'chain'] as const,
+            })
+
+            const testFail = new client.Counter({
+              name: `${prefix}_test_failed`,
+              help: `${prefix}_fail`,
+              labelNames: ['buildId', 'chain'] as const,
+            })
+
+            testPass.reset()
+            testFail.reset()
+
+            testFail.labels({ buildId: `${process.env.GITHUB_RUN_ID}`, chain: config.env.NETWORK }).inc(totalFailed)
+            testPass.labels({ buildId: `${process.env.GITHUB_RUN_ID}`, chain: config.env.NETWORK }).inc(totalPassed)
+
+            register.registerMetric(testPass)
+            register.registerMetric(testFail)
+            register.registerMetric(suite)
+
+            const gateway = new client.Pushgateway(`${process.env.CORE_PUSH_GATEWAY_URL}`, [], register)
+            await gateway
+              .push({ jobName: 'ui-automation' })
+              .then(({ resp, body }) => {
+                console.log(`Body: ${body}`)
+                console.log(`Response status: ${resp}`)
+              })
+              .catch((err: any) => {
+                console.log('err: ', err)
+              })
+          }
+        })
+      }
     },
+    baseUrl: process.env.CYPRESS_BASE_URL,
     specPattern: 'cypress/e2e/specs/*.e2e.cy.ts',
   },
 })

package.json

@@ -27,8 +27,8 @@
     "start-dev": "vite --mode dev --host",
     "start-stg": "vite --mode stg --host",
     "start-prod": "vite --mode production --host",
-    "test-e2e": "synpress run -cf cypress.config.ts -c baseUrl=http://127.0.0.1:4173/",
-    "test-schedule": "synpress run -cf cypress.config.ts -c baseUrl=https://kyberswap.com/"
+    "test-e2e": "synpress run -cf cypress.config.ts",
+    "test-schedule": "synpress run -cf cypress.config.ts"
   },
   "browserslist": [
     "chrome >= 52",
@@ -149,7 +149,7 @@
     "@cypress/grep": "^3.1.5",
     "@lingui/cli": "~3.14.0",
     "@lingui/vite-plugin": "~3.16.1",
-    "@synthetixio/synpress": "^3.7.0",
+    "@synthetixio/synpress": "^3.7.2-beta.7",
     "@trivago/prettier-plugin-sort-imports": "^3.3.1",
     "@types/aos": "^3.0.4",
     "@types/big.js": "^6.0.0",
@@ -190,6 +190,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unused-imports": "^2.0.0",
     "prettier": "^2.7.1",
+    "prom-client": "^14.2.0",
     "ts-node": "^10.9.1",
     "typescript": "4.8.4",
     "vite": "^4.3.9",
@@ -205,4 +206,4 @@
     "@lingui/core": "3.14.0",
     "@lingui/conf": "3.16.0"
   }
-}
+}

src/components/Header/KyberAINavItem.tsx

@@ -17,6 +17,7 @@ import NavGroup from './groups/NavGroup'
 import { DropdownTextAnchor, StyledNavLink } from './styleds'
 
 const CustomSlideToUnlock = styled(SlideToUnlock)`
+  background: ${({ theme }) => theme.subText};
   background: linear-gradient(
     to right,
     ${({ theme }) => theme.subText} 0,
@@ -25,8 +26,8 @@ const CustomSlideToUnlock = styled(SlideToUnlock)`
   );
   background-clip: text;
   -webkit-background-clip: text;
-
   &[data-active='true'] {
+    background: ${({ theme }) => theme.primary};
     background: linear-gradient(
       to right,
       ${({ theme }) => theme.primary} 0,

src/constants/networks/base.ts

@@ -22,7 +22,7 @@ const base: EVMNetworkInfo = {
   defaultBlockSubgraph: 'https://base-graph.kyberengineering.io/subgraphs/name/kybernetwork/base-blocks',
   etherscanUrl: 'https://basescan.org',
   etherscanName: 'Base Explorer',
-  bridgeURL: EMPTY,
+  bridgeURL: 'https://bridge.base.org/deposit',
   nativeToken: {
     symbol: 'ETH',
     name: 'ETH',

src/constants/networks/ethereum.ts

@@ -67,7 +67,7 @@ const ethereumInfo: EVMNetworkInfo = {
     routers: '0xF9c2b5746c946EF883ab2660BbbB1f10A5bdeAb4',
     farms: ['0x7D5ba536ab244aAA1EA42aB88428847F25E3E676'],
     farmv2Quoter: '0x6AFeb9EDd6Cf44fA8E89b1eee28284e6dD7705C8',
-    farmV2S: ['0x3D6AfE2fB73fFEd2E3dD00c501A174554e147a43'],
+    farmV2S: ['0x3D6AfE2fB73fFEd2E3dD00c501A174554e147a43', '0xf2BcDf38baA52F6b0C1Db5B025DfFf01Ae1d6dBd'],
   },
   limitOrder: [EnvKeys.PROD],
   averageBlockTimeInSeconds: 13.13,

src/pages/TrueSightV2/components/LoadingTextAnimation.tsx

@@ -1,5 +1,8 @@
+import { useMedia } from 'react-use'
 import styled, { keyframes } from 'styled-components'
 
+import { MEDIA_WIDTHS } from 'theme'
+
 const bounce = keyframes`
   15%,
   35%,
@@ -24,7 +27,6 @@ const Wrapper = styled.div`
     color: ${({ theme }) => theme.text};
     animation: ${bounce} 3s infinite ease;
     min-width: 10px;
-    display: flex;
     justify-content: center;
     margin-bottom: 10px;
   }
@@ -120,16 +122,34 @@ const Wrapper = styled.div`
     animation-delay: 1.55s;
   }
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    font-size: 12px;
+    font-size: 14px;
   `}
 `
 
 export default function LoadingTextAnimation() {
+  const isMobile = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
   return (
-    <Wrapper>
-      {'Crafting your screenshot...'.split('').map((w, index) => (
-        <span key={index}>{w}</span>
-      ))}
-    </Wrapper>
+    <>
+      {isMobile ? (
+        <Wrapper>
+          <div>
+            {'Crafting your'.split('').map((w, index) => (
+              <span key={index}>{w}</span>
+            ))}
+          </div>
+          <div>
+            {'screenshot...'.split('').map((w, index) => (
+              <span key={index}>{w}</span>
+            ))}
+          </div>
+        </Wrapper>
+      ) : (
+        <Wrapper>
+          {'Crafting your screenshot...'.split('').map((w, index) => (
+            <span key={index}>{w}</span>
+          ))}
+        </Wrapper>
+      )}
+    </>
   )
 }

src/pages/TrueSightV2/components/chart/index.tsx

@@ -2724,6 +2724,7 @@ export const Prochart = ({
         'mainSeriesProperties.priceAxisProperties.autoScale': true,
         'scalesProperties.textColor': theme.text,
       })
+
       tvWidget
         .activeChart()
         .createStudy('Relative Strength Index')
@@ -2764,7 +2765,7 @@ export const Prochart = ({
   const addSRLevels = useCallback(() => {
     if (!currentPrice || !tvWidget) return
     SRLevels?.forEach((level: ISRLevel) => {
-      const entityId = tvWidget.activeChart().createMultipointShape([{ time: level.timestamp, price: level.value }], {
+      const entityId = tvWidget?.activeChart().createMultipointShape([{ time: level.timestamp, price: level.value }], {
         shape: 'horizontal_ray',
         lock: true,
         disableSelection: true,
@@ -2799,10 +2800,12 @@ export const Prochart = ({
   }, [tvWidget, SRLevels, showSRLevels, currentPrice, theme, removeSRLevels, addSRLevels])
 
   useEffect(() => {
-    if (resolution && tvWidget?.activeChart().resolution() !== (resolution as ResolutionString)) {
-      tvWidget?.activeChart().setResolution(resolution as ResolutionString)
-      variablesRef.current.resolution = resolution
-    }
+    try {
+      if (resolution && tvWidget?.activeChart().resolution() !== (resolution as ResolutionString)) {
+        tvWidget?.activeChart().setResolution(resolution as ResolutionString)
+        variablesRef.current.resolution = resolution
+      }
+    } catch {}
   }, [resolution, tvWidget])
 
   return (