Improve logic, add new swap view

.env.example

@@ -49,3 +49,17 @@ NEXT_PUBLIC_CURRENCIES=usd, eur, gbp, cny, jpy, krw, aud
 
 # https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP
 NEXT_PUBLIC_CONTENT_SECURITY_POLICY=https://app.safe.global https://*.blockscout.com
+
+# Blocking variables must have any value that Boolean(value) returns true.
+
+# NEXT_PUBLIC_DISABLE_STAKE=
+# NEXT_PUBLIC_DISABLE_UNSTAKE=
+
+# NEXT_PUBLIC_DISABLE_MINT=
+# NEXT_PUBLIC_DISABLE_BURN=
+
+# NEXT_PUBLIC_DISABLE_BOOST=
+# NEXT_PUBLIC_DISABLE_UNBOOST=
+
+# NEXT_PUBLIC_DISABLE_UNBOOST_QUEUE=
+# NEXT_PUBLIC_DISABLE_UNSTAKE_QUEUE=

.github/workflows/e2e.yml

@@ -50,7 +50,7 @@ jobs:
       - name: Awaiting WEB deployment to be ready
         uses: UnlyEd/[email protected]
         env:
-          VERCEL_TOKEN: ${{ secrets.VERCEl_TOKEN }}
+          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
         with:
           deployment-url: ${{ steps.preview.outputs.preview_url }}
           timeout: 600
@@ -69,6 +69,11 @@ jobs:
           VERCEL_AUTOMATION_BYPASS_SECRET: ${{ secrets.VERCEL_AUTOMATION_BYPASS_SECRET }}
         run: npm run e2e
 
+      - name: Sanitize reports before upload
+        if: ${{ failure() }}
+        run: |
+          find ./playwright-report/ -name "*.html" -exec sed -i 's/${{ secrets.[A-Z_]* }}/***/g' {} \;
+
       - uses: actions/upload-artifact@v4
         if: ${{ failure() }}
         with:

package.json

@@ -84,7 +84,7 @@
     "@ledgerhq/hw-transport-webusb": "6.29.5",
     "@metamask/onboarding": "1.0.1",
     "@reduxjs/toolkit": "2.8.2",
-    "@stakewise/v3-sdk": "3.7.1",
+    "@stakewise/v3-sdk": "4.1.2",
     "@tailwindcss/postcss": "4.1.7",
     "@types/react-redux": "7.1.34",
     "@wagmi/connectors": "5.8.3",

scripts/checkLocalEnv.js

@@ -52,7 +52,7 @@ const getEnvList = (filePath) => {
   return result
 }
 
-const validateEnv = (env) => {
+const validateEnv = () => {
   const isEnvExist = fs.existsSync(localEnv)
 
   if (!isEnvExist) {

scripts/generateColors/index.js

@@ -2,6 +2,7 @@ const fs = require('fs')
 const path = require('path')
 const hexToRgb = require('./hexToRgb')
 
+
 const themes = [ 'light', 'dark' ]
 
 const destVariables = path.resolve(__dirname, `../../src/styles/variables.scss`)
@@ -93,7 +94,7 @@ const generateColors = () => {
 
   let newBaseFile = baseFile
 
-  Object.keys(colorsBase).forEach((theme, index) => {
+  Object.keys(colorsBase).forEach((theme) => {
     newBaseFile = newBaseFile
       .replace(
         new RegExp(`:root .body-${theme}-theme {[^}]*}\n`, 'g'),

src/app/global-error.tsx

@@ -3,12 +3,13 @@ import React, { useEffect } from 'react'
 import cx from 'classnames'
 import intl from 'modules/intl'
 import { Inter } from 'next/font/google'
-import theme, { ThemeColor } from 'modules/theme'
 import { cookie, constants } from 'helpers'
-import messages from 'views/ErrorView/messages'
+import theme, { ThemeColor } from 'modules/theme'
+
 
 import { Button, Text } from 'components'
 import languages from 'scripts/languages'
+import messages from 'views/ErrorView/messages'
 
 import 'styles/globals.scss'
 import 'styles/tailwind/config.css'

src/app/layout.tsx

@@ -6,10 +6,10 @@ import { commonMessages } from 'helpers'
 import { getLocale } from 'modules/intl/_SSR'
 import { ThemeColor } from 'modules/theme/enum'
 import { getServerTheme } from 'modules/theme/_SSR'
+import { getVaultBase } from 'helpers/requests/_SSR'
 import { getServerDevice } from 'modules/device/_SSR'
-import GlobalLayout from 'layouts/GlobalLayout/GlobalLayout'
 import { getNetworkId } from 'config/core/config/_SSR'
-import { getVaultBase } from 'helpers/requests/_SSR'
+import GlobalLayout from 'layouts/GlobalLayout/GlobalLayout'
 
 import 'focus-visible'
 import 'styles/globals.scss'

src/app/page.tsx

@@ -1 +1 @@
-export { default } from 'views/HomeView/HomeView'
+export { default } from 'views/SwapView/SwapView'

src/components/ApyBreakdown/ApyBreakdown.tsx

@@ -0,0 +1,34 @@
+import React, { ReactNode } from 'react'
+
+import PopupInfo from '../PopupInfo/PopupInfo'
+
+import Details, { DetailsProps } from './Details/Details'
+
+
+export type ApyBreakdownProps = {
+  className?: string
+  data?: DetailsProps['data']
+  withText?: boolean
+  maxBoostApy: number
+  children: ReactNode
+}
+
+const ApyBreakdown: React.FC<ApyBreakdownProps> = (props) => {
+  const { className, children, data, withText, maxBoostApy } = props
+
+  return (
+    <PopupInfo
+      className={className}
+      headNode={children}
+    >
+      <Details
+        data={data || []}
+        withText={withText}
+        maxBoostApy={maxBoostApy}
+      />
+    </PopupInfo>
+  )
+}
+
+
+export default React.memo(ApyBreakdown)

src/views/HomeView/common/ApyBreakdown/Details/Details.tsx → src/components/ApyBreakdown/Details/Details.tsx

@@ -2,12 +2,12 @@ import React, { useMemo } from 'react'
 import cx from 'classnames'
 import date from 'modules/date'
 import intl from 'modules/intl'
-import methods from 'helpers/methods'
+import { useStore } from 'hooks'
 import { useConfig } from 'config'
-import { useSelector } from 'react-redux'
-import { commonMessages } from 'helpers'
+import { commonMessages, methods } from 'helpers'
 
-import { Text, Logo } from 'components'
+import Logo from '../../Logo/Logo'
+import Text from '../../Text/Text'
 
 import messages from './messages'
 
@@ -22,9 +22,10 @@ type Data = {
   endTimestamp?: string
 }
 
-type DetailsProps = {
+export type DetailsProps = {
   className?: string
   data: Data[]
+  maxBoostApy: number
   withText?: boolean
 }
 
@@ -34,16 +35,18 @@ const Details: React.FC<DetailsProps> = (props) => {
   const now = date.time()
   const { sdk } = useConfig()
   const intlRef = intl.useIntlRef()
-  const { maxBoostApy } = useSelector(storeSelector)
+  const { maxBoostApy } = useStore(storeSelector)
 
   const tokenList = useMemo(() => {
     const SSV = sdk.config.addresses.tokens.ssv.toLocaleLowerCase()
+    const obol = sdk.config.addresses.tokens.obol.toLocaleLowerCase()
     const SWISE = sdk.config.addresses.tokens.swise.toLocaleLowerCase()
     const mintToken = sdk.config.addresses.tokens.mintToken.toLocaleLowerCase()
     const depositToken = sdk.config.addresses.tokens.depositToken.toLocaleLowerCase()
 
     return ({
       [SSV]: sdk.config.tokens.ssv,
+      [obol]: sdk.config.tokens.obol,
       [SWISE]: sdk.config.tokens.swise,
       [mintToken]: sdk.config.tokens.mintToken,
       [depositToken]: sdk.config.tokens.depositToken,

src/components/ButtonBase/ButtonBase.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import methods from 'helpers/methods'
+import { methods } from 'helpers'
 import cx from 'classnames'
 
 import s from './ButtonBase.module.scss'

src/components/Chart/Legend/Amount/Amount.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useCallback } from 'react'
 import { createSelector } from '@reduxjs/toolkit'
-import { useSelector } from 'react-redux'
-import methods from 'helpers/methods'
+import { methods } from 'helpers'
+import { useStore } from 'hooks'
 import cx from 'classnames'
 
 import Text from '../../../Text/Text'
@@ -29,7 +29,7 @@ const storeSelector = createSelector([
 const Amount: React.FC<AmountProps> = (props) => {
   const { className, token, chart, series } = props
 
-  const { fiatRates, currency, currencySymbol } = useSelector(storeSelector)
+  const { fiatRates, currency, currencySymbol } = useStore(storeSelector)
 
   const fiatTooltipRef = useRef<HTMLDivElement>(null)
   const tokenValueTooltipRef = useRef<HTMLDivElement>(null)

src/components/Chart/Legend/Percentage/Percentage.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useCallback } from 'react'
-import methods from 'helpers/methods'
+import { methods } from 'helpers'
 import cx from 'classnames'
 
 import Text from '../../../Text/Text'

src/components/Chart/util/useDefaultSettings.ts

@@ -1,7 +1,7 @@
 import { useMemo, useCallback } from 'react'
 import theme, { ThemeColor } from 'modules/theme'
+import { methods } from 'helpers'
 import intl from 'modules/intl'
-import methods from 'helpers/methods'
 
 import { LineStyle, LineWidth, CrosshairMode } from 'lightweight-charts'
 

src/components/Dropdown/DropdownView/DropdownView.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, KeyboardEventHandler, ReactElement, ReactNode } from 'react'
+import React, { Fragment, KeyboardEventHandler, ReactElement, ReactNode, useRef } from 'react'
 import cx from 'classnames'
 import { offset, shift, VirtualElement, OffsetOptions } from '@floating-ui/react'
 import type { Placement } from '@floating-ui/react'
@@ -15,6 +15,7 @@ type ButtonInput = {
 
 export type DropdownViewProps = {
   className?: string
+  contentClassName?: string
   children: ReactNode
   disabled?: boolean
   // The child component must inherit the props, so be sure to make <Foo {...props} />
@@ -29,6 +30,7 @@ export type DropdownViewProps = {
     autoUpdate?: boolean
     offsetOptions?: Omit<OffsetOptions, 'number'>
   }
+  onOpen?: () => void
   onClose?: () => void
   onChange?: (value: any) => void
   onOptionsClick?: () => void
@@ -41,10 +43,12 @@ type DropdownViewComponent = React.FC<DropdownViewProps> & {
 
 const DropdownView: DropdownViewComponent = (props: DropdownViewProps) => {
   const {
-    className, children, button, value, disabled, withArrow, middleware,
-    placement = 'bottom-end', dataTestId, onClose, onChange, onOptionsClick, onOptionsKeyDown,
+    className, contentClassName, children, button, value, disabled, withArrow, middleware,
+    placement = 'bottom-end', dataTestId, onOpen, onClose, onChange, onOptionsClick, onOptionsKeyDown,
   } = props
 
+  const isOpenRef = useRef(false)
+
   const { refs, floatingStyles } = useFloating({
     placement,
     middleware: [
@@ -73,10 +77,16 @@ const DropdownView: DropdownViewComponent = (props: DropdownViewProps) => {
             ({ open }) => {
               const arrow = open ? 'up' : 'down'
 
-              if (!open && typeof onClose === 'function') {
+              if (open && !isOpenRef.current && typeof onOpen === 'function') {
+                onOpen()
+              }
+
+              if (!open && isOpenRef.current && typeof onClose === 'function') {
                 setTimeout(onClose)
               }
 
+              isOpenRef.current = open
+
               if (typeof button === 'function') {
                 return button({
                   ref: refs.setReference,
@@ -94,7 +104,11 @@ const DropdownView: DropdownViewComponent = (props: DropdownViewProps) => {
         </ListboxButton>
         <ListboxOptions
           ref={refs.setFloating}
-          className={cx(s.options, 'absolute rounded-8 bg-background border border-dark/10 overflow-x-hidden overflow-y-auto shadow-md')}
+          className={cx(
+            s.options,
+            contentClassName,
+            'absolute rounded-8 bg-background border border-dark/10 overflow-x-hidden overflow-y-auto shadow-md'
+          )}
           style={floatingStyles}
           data-testid={`${dataTestId}-options`}
           onClick={onOptionsClick}

src/components/Href/Href.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, RefObject, useRef, useCallback } from 'react'
 import { useEventListener } from 'hooks'
+import { methods } from 'helpers'
 import NextLink from 'next/link'
-import methods from 'helpers/methods'
 import intl from 'modules/intl'
 
 

src/components/Input/InputView/InputView.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useRef, useId, useEffect, ChangeEventHandler } from 'react'
 import cx from 'classnames'
-import methods from 'helpers/methods'
+import { methods } from 'helpers'
 
 import Text from '../../Text/Text'
 import Icon from '../../Icon/Icon'