diff --git a/apps/pool/package.json b/apps/pool/package.json
index 96d9418be..1b9ae0e50 100644
--- a/apps/pool/package.json
+++ b/apps/pool/package.json
@@ -18,7 +18,7 @@
"@ethersproject/experimental": "^5.7.0",
"@ethersproject/providers": "^5.7.2",
"@ethersproject/solidity": "^5.7.0",
- "@headlessui/react": "1.7.17",
+ "@headlessui/react": "2.1.2",
"@heroicons/react": "2.1.5",
"@lingui/core": "4.11.3",
"@lingui/macro": "4.11.3",
diff --git a/apps/pool/tailwind.config.js b/apps/pool/tailwind.config.js
index c523501f2..4a3a2c894 100644
--- a/apps/pool/tailwind.config.js
+++ b/apps/pool/tailwind.config.js
@@ -7,7 +7,6 @@ const tailwindConfig = {
'./components/**/*.{js,ts,jsx,tsx}',
'../../packages/wagmi/{components,systems}/**/*.{js,ts,jsx,tsx}',
'../../packages/compat/{components,systems}/**/*.{js,ts,jsx,tsx}',
- '../../packages/parachains-impl/**/{components,systems}/**/*.{js,ts,jsx,tsx}',
'../../packages/ui/{,!(node_modules)/**/}*.{js,ts,jsx,tsx}',
],
theme: {
diff --git a/apps/referrals/package.json b/apps/referrals/package.json
index fc4eb78e0..29f38afb2 100644
--- a/apps/referrals/package.json
+++ b/apps/referrals/package.json
@@ -12,7 +12,7 @@
"@ethersproject/address": "^5.7.0",
"@ethersproject/constants": "^5.7.0",
"@ethersproject/providers": "^5.7.2",
- "@headlessui/react": "1.7.17",
+ "@headlessui/react": "2.1.2",
"@heroicons/react": "2.1.5",
"@lingui/core": "4.11.3",
"@lingui/macro": "4.11.3",
diff --git a/apps/swap/components/CrossTransfer/NetworkSelector/NetworkSelectorMenu.tsx b/apps/swap/components/CrossTransfer/NetworkSelector/NetworkSelectorMenu.tsx
index e338bc01b..29bf11549 100644
--- a/apps/swap/components/CrossTransfer/NetworkSelector/NetworkSelectorMenu.tsx
+++ b/apps/swap/components/CrossTransfer/NetworkSelector/NetworkSelectorMenu.tsx
@@ -20,6 +20,7 @@ export function NetworkSelectorMenu
({
<>
{typeof children === 'function' ? children({ close, open }) : children}
= ({ trade }) => {
return (
-
+
)}
diff --git a/apps/swap/components/SwapStatsDisclosure/SwapStatsDisclosure.tsx b/apps/swap/components/SwapStatsDisclosure/SwapStatsDisclosure.tsx
index ae9f883df..0156753d1 100644
--- a/apps/swap/components/SwapStatsDisclosure/SwapStatsDisclosure.tsx
+++ b/apps/swap/components/SwapStatsDisclosure/SwapStatsDisclosure.tsx
@@ -1,4 +1,4 @@
-import { Disclosure, Transition } from '@headlessui/react'
+import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from '@headlessui/react'
import { InformationCircleIcon } from '@heroicons/react/24/outline'
import { ChevronDownIcon } from '@heroicons/react/20/solid'
import { Percent } from '@zenlink-interface/math'
@@ -78,18 +78,10 @@ export const SwapStatsDisclosure: FC = () => {
{showRoute ? t`Hide` : t`Show`}
{trade?.version === TradeVersion.LEGACY && (
-
-
+
+
+
+
)}
>
@@ -98,6 +90,7 @@ export const SwapStatsDisclosure: FC = () => {
return (
<>
{
)}
-
+
{
height={24}
width={24}
/>
-
+
-
-
+
{stats}
-
+
>
)}
diff --git a/apps/swap/package.json b/apps/swap/package.json
index 28d2cf22b..5ea54778f 100644
--- a/apps/swap/package.json
+++ b/apps/swap/package.json
@@ -12,7 +12,7 @@
"@ethersproject/address": "^5.7.0",
"@ethersproject/constants": "^5.7.0",
"@ethersproject/providers": "^5.7.2",
- "@headlessui/react": "1.7.17",
+ "@headlessui/react": "2.1.2",
"@heroicons/react": "2.1.5",
"@lingui/core": "4.11.3",
"@lingui/macro": "4.11.3",
diff --git a/apps/swap/pages/_app.tsx b/apps/swap/pages/_app.tsx
index e9e89ee8c..9c7066b49 100644
--- a/apps/swap/pages/_app.tsx
+++ b/apps/swap/pages/_app.tsx
@@ -31,12 +31,6 @@ const store = configureStore({
},
})
-declare global {
- interface Window {
- dataLayer: Record[]
- }
-}
-
const queryClient = new QueryClient()
const MyApp: FC = ({ Component, pageProps }) => {
diff --git a/apps/swap/tailwind.config.js b/apps/swap/tailwind.config.js
index 9fd0a7a66..1947dea2e 100644
--- a/apps/swap/tailwind.config.js
+++ b/apps/swap/tailwind.config.js
@@ -5,7 +5,6 @@ const tailwindConfig = {
'./components/**/*.{js,ts,jsx,tsx}',
'../../packages/wagmi/{components,systems}/**/*.{js,ts,jsx,tsx}',
'../../packages/compat/{components,systems}/**/*.{js,ts,jsx,tsx}',
- '../../packages/parachains-impl/**/{components,systems}/**/*.{js,ts,jsx,tsx}',
'../../packages/ui/{,!(node_modules)/**/}*.{js,ts,jsx,tsx}',
],
darkMode: 'class',
diff --git a/packages/compat/package.json b/packages/compat/package.json
index 56cdfc136..94d0f4403 100644
--- a/packages/compat/package.json
+++ b/packages/compat/package.json
@@ -24,7 +24,7 @@
},
"dependencies": {
"@ethersproject/constants": "^5.7.0",
- "@headlessui/react": "1.7.17",
+ "@headlessui/react": "2.1.2",
"@heroicons/react": "2.1.5",
"@lingui/core": "4.11.3",
"@lingui/macro": "4.11.3",
diff --git a/packages/parachains-impl/amplitude/package.json b/packages/parachains-impl/amplitude/package.json
index 03a1177a4..1609f26f7 100644
--- a/packages/parachains-impl/amplitude/package.json
+++ b/packages/parachains-impl/amplitude/package.json
@@ -22,7 +22,7 @@
"react-dom": "^18.3.1"
},
"dependencies": {
- "@headlessui/react": "1.7.17",
+ "@headlessui/react": "2.1.2",
"@heroicons/react": "2.1.5",
"@lingui/core": "4.11.3",
"@lingui/macro": "4.11.3",
diff --git a/packages/parachains-impl/bifrost/package.json b/packages/parachains-impl/bifrost/package.json
index 502b5c352..4fa2e0513 100644
--- a/packages/parachains-impl/bifrost/package.json
+++ b/packages/parachains-impl/bifrost/package.json
@@ -21,7 +21,7 @@
"react-dom": "^18.3.1"
},
"dependencies": {
- "@headlessui/react": "1.7.17",
+ "@headlessui/react": "2.1.2",
"@heroicons/react": "2.1.5",
"@lingui/core": "4.11.3",
"@lingui/macro": "4.11.3",
diff --git a/packages/ui/animation/AppearOnMount/AppearOnMount.tsx b/packages/ui/animation/AppearOnMount/AppearOnMount.tsx
index 024d3aa31..c4272ef43 100644
--- a/packages/ui/animation/AppearOnMount/AppearOnMount.tsx
+++ b/packages/ui/animation/AppearOnMount/AppearOnMount.tsx
@@ -1,5 +1,6 @@
import { Transition } from '@headlessui/react'
import { useIsMounted } from '@zenlink-interface/hooks'
+import classNames from 'classnames'
import type { ElementType, FC, ReactNode } from 'react'
interface AppearOnMountProps {
@@ -20,17 +21,15 @@ export const AppearOnMount: FC = ({ as = 'div', show, childr
return (
- {typeof children === 'function' ? children(isMounted) : children}
+
+ {typeof children === 'function' ? children(isMounted) : children}
+
)
}
diff --git a/packages/ui/animation/SlideIn/FromBottom.tsx b/packages/ui/animation/SlideIn/FromBottom.tsx
index ee26719a4..df00d17d9 100644
--- a/packages/ui/animation/SlideIn/FromBottom.tsx
+++ b/packages/ui/animation/SlideIn/FromBottom.tsx
@@ -1,4 +1,4 @@
-import { Transition } from '@headlessui/react'
+import { Transition, TransitionChild } from '@headlessui/react'
import { useIsSmScreen } from '@zenlink-interface/hooks'
import classNames from 'classnames'
import type { FC, ReactElement } from 'react'
@@ -46,9 +46,9 @@ export const FromBottom: FC = ({
}
return ReactDOM.createPortal(
-
+
- = ({
className="translate-y-[-100%] absolute inset-0 bg-black/70 transition-opacity"
onClick={onClose}
/>
-
-
+ = ({
unmount={false}
>
{children}
-
+
- ,
+ ,
portal,
)
}
diff --git a/packages/ui/animation/SlideIn/FromLeft.tsx b/packages/ui/animation/SlideIn/FromLeft.tsx
index 78f3af816..0ec34a95b 100644
--- a/packages/ui/animation/SlideIn/FromLeft.tsx
+++ b/packages/ui/animation/SlideIn/FromLeft.tsx
@@ -1,4 +1,4 @@
-import { Transition } from '@headlessui/react'
+import { Transition, TransitionChild } from '@headlessui/react'
import { useIsSmScreen } from '@zenlink-interface/hooks'
import classNames from 'classnames'
import type { FC, ReactElement } from 'react'
@@ -46,42 +46,25 @@ export const FromLeft: FC = ({
}
return ReactDOM.createPortal(
-
-
-
-
-
-
+
+
+
+
+
- {children}
-
+
+ {children}
+
+
- ,
+ ,
portal,
)
}
diff --git a/packages/ui/animation/SlideIn/FromRight.tsx b/packages/ui/animation/SlideIn/FromRight.tsx
index 166ba79d3..1da943d51 100644
--- a/packages/ui/animation/SlideIn/FromRight.tsx
+++ b/packages/ui/animation/SlideIn/FromRight.tsx
@@ -1,4 +1,4 @@
-import { Transition } from '@headlessui/react'
+import { Transition, TransitionChild } from '@headlessui/react'
import { useIsSmScreen } from '@zenlink-interface/hooks'
import classNames from 'classnames'
import type { FC, ReactElement } from 'react'
@@ -46,42 +46,22 @@ export const FromRight: FC = ({
}
return ReactDOM.createPortal(
-
-
-
-
-
-
+
+
- {children}
-
+
+ {children}
+
+
- ,
+ ,
portal,
)
}
diff --git a/packages/ui/animation/SlideIn/FromTop.tsx b/packages/ui/animation/SlideIn/FromTop.tsx
index 1a2ca27d3..c78a3f4f2 100644
--- a/packages/ui/animation/SlideIn/FromTop.tsx
+++ b/packages/ui/animation/SlideIn/FromTop.tsx
@@ -1,4 +1,4 @@
-import { Transition } from '@headlessui/react'
+import { Transition, TransitionChild } from '@headlessui/react'
import { useIsSmScreen } from '@zenlink-interface/hooks'
import classNames from 'classnames'
import type { FC, ReactElement } from 'react'
@@ -46,9 +46,9 @@ export const FromTop: FC = ({
}
return ReactDOM.createPortal(
-
+
- = ({
className="translate-y-full absolute inset-0 bg-black/70 transition-opacity"
onClick={onClose}
/>
-
-
+ = ({
unmount={false}
>
{children}
-
+
- ,
+ ,
portal,
)
}
diff --git a/packages/ui/app/Header.tsx b/packages/ui/app/Header.tsx
index 16fe15965..bba47415b 100644
--- a/packages/ui/app/Header.tsx
+++ b/packages/ui/app/Header.tsx
@@ -1,9 +1,9 @@
-import { Listbox, Transition } from '@headlessui/react'
+import { ListboxButton, Transition } from '@headlessui/react'
import { ArrowTopRightOnSquareIcon, EllipsisHorizontalIcon } from '@heroicons/react/24/outline'
import { Trans } from '@lingui/macro'
import useScrollPosition from '@react-hook/window-scroll'
import { useIsMounted } from '@zenlink-interface/hooks'
-import React, { Fragment } from 'react'
+import React from 'react'
import type { MaxWidth } from '..'
import {
@@ -67,17 +67,8 @@ export function Header({
)}
{...props}
>
-
-
+
+
{nav}
)
diff --git a/packages/ui/drawer/Drawer.tsx b/packages/ui/drawer/Drawer.tsx
index 6df4ed72a..4edcccd58 100644
--- a/packages/ui/drawer/Drawer.tsx
+++ b/packages/ui/drawer/Drawer.tsx
@@ -1,4 +1,4 @@
-import { Transition } from '@headlessui/react'
+import { Transition, TransitionChild } from '@headlessui/react'
import { useIsMounted } from '@zenlink-interface/hooks'
import classNames from 'classnames'
import type {
@@ -82,9 +82,9 @@ export const Panel: FC