New release

package.json

@@ -74,25 +74,30 @@
   },
   "dependencies": {
     "@binance/w3w-ethereum-provider": "1.1.8-alpha.0",
-    "@cowprotocol/cow-sdk": "7.2.5",
-    "@cowprotocol/sdk-ethers-v6-adapter": "0.3.0",
+    "@cowprotocol/cow-sdk": "8.0.0",
+    "@cowprotocol/sdk-ethers-v6-adapter": "0.3.11",
     "@floating-ui/react": "0.27.16",
     "@floating-ui/react-dom": "2.1.6",
     "@headlessui/react": "2.2.4",
-    "@ledgerhq/hw-app-eth": "6.45.5",
+    "@ledgerhq/device-management-kit": "0.9.0",
+    "@ledgerhq/device-signer-kit-ethereum": "1.8.0",
+    "@ledgerhq/device-transport-kit-web-ble": "1.2.0",
+    "@ledgerhq/device-transport-kit-web-hid": "1.2.0",
+    "@ledgerhq/hw-app-eth": "6.46.0",
     "@ledgerhq/hw-transport-web-ble": "6.29.12",
-    "@ledgerhq/hw-transport-webhid": "6.30.1",
-    "@ledgerhq/hw-transport-webusb": "6.29.5",
+    "@ledgerhq/hw-transport-webhid": "6.30.8",
+    "@ledgerhq/hw-transport-webusb": "6.29.12",
     "@ledgerhq/types-live": "6.90.0",
     "@metamask/onboarding": "1.0.1",
     "@reduxjs/toolkit": "2.8.2",
     "@safe-global/safe-apps-provider": "0.18.6",
     "@safe-global/safe-apps-sdk": "9.1.0",
-    "@stakewise/v3-sdk": "4.2.2",
+    "@stakewise/v3-sdk": "4.2.5",
     "@tailwindcss/postcss": "4.1.7",
     "@types/react-redux": "7.1.34",
-    "@wagmi/connectors": "7.1.1",
-    "@wagmi/core": "3.2.1",
+    "@wagmi/connectors": "7.2.1",
+    "@wagmi/core": "3.4.0",
+    "@walletconnect/ethereum-provider": "2.21.1",
     "async-mutex": "0.5.0",
     "autoprefixer": "10.4.21",
     "circular-dependency-plugin": "5.2.2",
@@ -105,6 +110,7 @@
     "husky": "9.1.7",
     "js-cookie": "3.0.5",
     "lightweight-charts": "5.0.7",
+    "mipd": "0.0.7",
     "next": "16.2.6",
     "react": "19.2.3",
     "react-dom": "19.2.3",

public/manifest.json

@@ -1,7 +1,7 @@
 {
-  "name": "Vaul Interface",
-  "short_name": "Vaul Interface",
-  "description": "Vaul Interface",
+  "name": "Vault Interface",
+  "short_name": "Vault Interface",
+  "description": "Vault Interface",
   "icons": [
     {
       "src": "favicon.ico",

src/components/Button/ButtonContent/ButtonContent.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import cx from 'classnames'
 
-import Logo from '../../Logo/Logo'
 import Loading from '../../Loading/Loading'
-import Text, { TextSize, TextColor } from '../../Text/Text'
 import Icon, { IconProps } from '../../Icon/Icon'
+import WalletIcon from '../../WalletIcon/WalletIcon'
 import { IconName, LogoName } from '../../Image/Image'
+import Text, { TextSize, TextColor } from '../../Text/Text'
 
 
 export type ButtonContentProps = {
@@ -15,7 +15,7 @@ export type ButtonContentProps = {
   titleSize: TextSize
   iconSize: IconProps['size']
   icon?: IconName
-  logo?: LogoName
+  logo?: LogoName | string
   arrow?: 'up' | 'down'
   color?: IconProps['color']
   loading?: boolean
@@ -46,9 +46,8 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
       }
       {
         Boolean(logo) && (
-          <Logo
-            className="flex-none"
-            name={logo as LogoName}
+          <WalletIcon
+            logo={logo}
             size={iconSize}
           />
         )

src/components/DatePicker/Calendar/Calendar.module.scss

@@ -0,0 +1,3 @@
+.grid {
+  grid-template-columns: repeat(7, 32px);
+}

src/components/DatePicker/Calendar/Calendar.tsx

@@ -0,0 +1,182 @@
+import React, { useMemo } from 'react'
+import forms from 'modules/forms'
+import date from 'modules/date'
+import cx from 'classnames'
+
+import Bone from '../../Bone/Bone'
+import Icon from '../../Icon/Icon'
+import Text from '../../Text/Text'
+import ButtonBase from '../../ButtonBase/ButtonBase'
+
+import Day from './Day/Day'
+import { useDays, getDate } from './util'
+
+import s from './Calendar.module.scss'
+
+
+export type CalendarProps = {
+  className?: string
+  field: Forms.Field<string>
+  minDate?: string
+  maxDate?: string
+  onChange?: () => void
+}
+
+const Calendar: React.FC<CalendarProps> = (props) => {
+  const { className, field, minDate, maxDate, onChange } = props
+
+  const { value: selectedDay } = forms.useFieldValue(field)
+  const { days, title, weekDays, yearMonth, weeksOffset, weeksCount, isLocaleFetching, setMonth } = useDays({
+    field,
+    animationDuration: 350,
+  })
+
+  const minimalDate = useMemo(() => getDate(minDate), [ minDate ])
+  const maximalDate = useMemo(() => getDate(maxDate), [ maxDate ])
+
+  const [ firstDayOfMonth, lastDayOfMonth ] = useMemo(() => {
+    const yearMonthDate = date.time(yearMonth, 'YYYY-MM')
+
+    return [
+      yearMonthDate.startOf('month'),
+      yearMonthDate.endOf('month'),
+    ]
+  }, [ yearMonth ])
+
+  const isLeftButtonDisabled = useMemo(() => {
+    if (minimalDate) {
+      return !firstDayOfMonth.isAfter(minimalDate)
+    }
+  }, [ firstDayOfMonth, minimalDate ])
+
+  const isRightButtonDisabled = useMemo(() => {
+    if (maximalDate) {
+      return !lastDayOfMonth.isBefore(maximalDate)
+    }
+  }, [ lastDayOfMonth, maximalDate ])
+
+  return (
+    <div className={cx(className, 'w-[224px]')}>
+      <div className="flex items-center">
+        <ButtonBase
+          className={cx('rounded-4', {
+            'opacity-10': isLeftButtonDisabled,
+          })}
+          disabled={isLeftButtonDisabled}
+          onClick={() => setMonth(-1)}
+        >
+          <Icon
+            name="arrow/left"
+            size={20}
+            color="dark"
+          />
+        </ButtonBase>
+        {
+          isLocaleFetching ? (
+            <div className="flex-1 flex items-center justify-center">
+              <Bone
+                className="rounded-4"
+                w={126}
+                h={24}
+              />
+            </div>
+          ) : (
+            <Text
+              className="flex-1 text-center capitalize"
+              message={title}
+              size="t16m"
+              color="dark"
+            />
+          )
+        }
+        <ButtonBase
+          className={cx('rounded-4', {
+            'opacity-10': isRightButtonDisabled,
+          })}
+          disabled={isRightButtonDisabled}
+          onClick={() => setMonth(1)}
+        >
+          <Icon
+            name="arrow/right"
+            size={20}
+            color="dark"
+          />
+        </ButtonBase>
+      </div>
+      <div className={cx('grid text-center opacity-80 mt-8 capitalize', s.grid)}>
+        {
+          weekDays.map((weekDay) => (
+            isLocaleFetching ? (
+              <div
+                key={weekDay}
+                className="flex items-center justify-center"
+              >
+                <Bone
+                  className="rounded-4"
+                  w={20}
+                  h={20}
+                  delay={1}
+                />
+              </div>
+            ) : (
+              <Text
+                key={weekDay}
+                className="py-4"
+                message={weekDay}
+                size="t16m"
+                color="primary"
+              />
+            )
+          ))
+        }
+      </div>
+      <div
+        className={cx('relative transition-height duration-350', {
+          'overflow-hidden': weeksOffset !== 0,
+        })}
+        style={{
+          height: `${weeksCount * 32}px`,
+        }}
+      >
+        <div
+          className={cx('grid text-center', s.grid, {
+            'transition-transform duration-350': weeksOffset,
+          })}
+          style={{
+            transform: `translateY(${weeksOffset * 32}px)`,
+            marginTop: weeksOffset > 0 ? `-${weeksOffset * 32}px` : '0',
+          }}
+        >
+          {
+            days.map((day) => {
+              const dayDate = getDate(day.fullDate) as Date.Time
+
+              return (
+                <Day
+                  key={day.fullDate}
+                  title={day.date}
+                  isActive={day.yearMonth === yearMonth}
+                  isDisabled={(
+                    minimalDate?.isAfter(dayDate.endOf('day'))
+                    || maximalDate?.isBefore(dayDate.startOf('day'))
+                  )}
+                  isSelected={day.fullDate === selectedDay}
+                  onClick={() => {
+                    field.setValue(day.fullDate)
+
+                    if (typeof onChange === 'function') {
+                      onChange()
+                    }
+                  }}
+                />
+              )
+            })
+          }
+        </div>
+      </div>
+    </div>
+  )
+}
+
+
+export default React.memo(Calendar)

src/components/DatePicker/Calendar/Day/Day.module.scss

@@ -0,0 +1,12 @@
+.fadeIn {
+  animation: fadeIn 500ms ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0.3;
+  }
+  to {
+    opacity: 1;
+  }
+}

src/components/DatePicker/Calendar/Day/Day.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import cx from 'classnames'
+
+import ButtonBase from '../../../ButtonBase/ButtonBase'
+import Text from '../../../Text/Text'
+
+import s from './Day.module.scss'
+
+
+type DayProps = {
+  className?: string
+  title: string
+  isActive?: boolean
+  isSelected?: boolean
+  isDisabled?: boolean
+  onClick: () => void
+}
+
+const Day: React.FC<DayProps> = (props) => {
+  const { className, title, isActive, isSelected, isDisabled, onClick } = props
+
+  const defaultClassName = cx({
+    [s.fadeIn]: isActive,
+    'opacity-30': !isActive,
+    'bg-primary': isSelected,
+    'hover:bg-primary/20': !isSelected && isActive,
+    'hover:bg-primary/50': !isSelected && !isActive,
+  })
+
+  return (
+    <ButtonBase
+      className={cx(className, 'transition-opacity duration-500 rounded-4 py-4', {
+        [defaultClassName]: !isDisabled,
+        'opacity-10': isDisabled,
+      })}
+      disabled={isDisabled}
+      onClick={onClick}
+    >
+      <Text
+        message={title}
+        size="t16m"
+        color={isSelected && !isDisabled ? 'white' : 'dark'}
+      />
+    </ButtonBase>
+  )
+}
+
+
+export default React.memo(Day)

src/components/DatePicker/Calendar/util/getDate.ts

@@ -0,0 +1,22 @@
+import date from 'modules/date'
+
+
+const getDate = (dateString?: string) => {
+  if (!dateString) {
+    return null
+  }
+
+  let result = date.time(dateString)
+
+  if (result.isValid()) {
+    return result
+  }
+  else {
+    result = date.time(dateString, 'YYYY-MM-DD')
+  }
+
+  return result.isValid() ? result : null
+}
+
+
+export default getDate

src/components/DatePicker/Calendar/util/index.ts

@@ -0,0 +1,2 @@
+export { default as useDays } from './useDays'
+export { default as getDate } from './getDate'