chore(deps): update dependency @headlessui/react to v2 (#248)

* chore(deps): update dependency @headlessui/react to v2 * chore(deps): update dependency @headlessui/react to v2 * fix * fix --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Hayden Fan <[email protected]>
zenlinkpro · Sep 5, 2024 · 7eea362 · 7eea362
1 parent 6e1f3d9
commit 7eea362
Show file tree

Hide file tree

Showing 65 changed files with 402 additions and 400 deletions.
diff --git a/apps/analytics/components/Table/TableFilters/TableFiltersSearchToken.tsx b/apps/analytics/components/Table/TableFilters/TableFiltersSearchToken.tsx
@@ -48,7 +48,6 @@ export const TableFiltersSearchToken: FC = () => {
         <div className="min-w-[24px] w-6 h-6 min-h-[24px] flex flex-grow items-center justify-center">
           <MagnifyingGlassIcon className="text-slate-500" height={20} strokeWidth={2} width={20} />
         </div>
-
         <input
           className={classNames(DEFAULT_INPUT_UNSTYLED, 'flex flex-grow !text-base placeholder:text-sm')}
           onInput={e => setQuery(e.currentTarget.value)}
@@ -58,6 +57,7 @@ export const TableFiltersSearchToken: FC = () => {
         />
         <Transition
           appear
+          as="div"
           className="absolute top-0 bottom-0 right-0 flex items-center"
           enter="transition duration-300 origin-center ease-out"
           enterFrom="transform scale-90 opacity-0"
@@ -73,6 +73,7 @@ export const TableFiltersSearchToken: FC = () => {
         </Transition>
       </div>
       <Transition
+        as="div"
         className="transition-[max-width] overflow-hidden flex items-center h-12 gap-2"
         enter="duration-300 ease-in-out"
         enterFrom="transform max-w-0"
@@ -86,6 +87,7 @@ export const TableFiltersSearchToken: FC = () => {
           <div className="w-px h-full bg-slate-500/20 dark:bg-slate-200/20" />
         </div>
         <Transition
+          as="div"
           className="flex flex-grow transition-[max-width] overflow-hidden"
           enter="duration-300 ease-in-out"
           enterFrom="transform max-w-0"

diff --git a/apps/analytics/components/TableSection/TableSection.tsx b/apps/analytics/components/TableSection/TableSection.tsx
@@ -1,4 +1,4 @@
-import { Tab } from '@headlessui/react'
+import { Tab, TabGroup, TabPanel, TabPanels } from '@headlessui/react'
 import { Trans } from '@lingui/macro'
 import { Network, classNames } from '@zenlink-interface/ui'
 import { PoolTable, TableFilters, ZLKStats, usePoolFilters } from 'components'
@@ -9,8 +9,8 @@ export const TableSection: FC = () => {
   const { selectedNetworks, setFilters } = usePoolFilters()
 
   return (
-    <section className="flex flex-col gap-6">
-      <Tab.Group>
+    <section>
+      <TabGroup className="flex flex-col gap-6">
         <div className="flex items-center gap-6">
           <Tab
             className={({ selected }) => classNames(
@@ -30,8 +30,8 @@ export const TableSection: FC = () => {
             <Trans>Stats</Trans>
           </Tab>
         </div>
-        <Tab.Panels>
-          <Tab.Panel unmount={false}>
+        <TabPanels>
+          <TabPanel unmount={false}>
             <div className="flex flex-col gap-6">
               <TableFilters />
               <Network.Selector
@@ -41,12 +41,12 @@ export const TableSection: FC = () => {
               />
               <PoolTable />
             </div>
-          </Tab.Panel>
-          <Tab.Panel unmount>
+          </TabPanel>
+          <TabPanel unmount>
             <ZLKStats />
-          </Tab.Panel>
-        </Tab.Panels>
-      </Tab.Group>
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
     </section>
   )
 }
diff --git a/apps/analytics/package.json b/apps/analytics/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/analytics/tailwind.config.js b/apps/analytics/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/gauge/package.json b/apps/gauge/package.json
@@ -9,7 +9,7 @@
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next && rm -rf .swc && rm -rf .graphclient"
   },
   "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/apps/market/components/MarketSection/MarketActions/MarketAdd/MarketAddZap.tsx b/apps/market/components/MarketSection/MarketActions/MarketAdd/MarketAddZap.tsx
@@ -73,7 +73,6 @@ export const MarketAddZap: FC<MarketAddZapProps> = ({ market }) => {
           </MarketAddZapWidget>
         )}
       </MarketAddZapReviewModal>
-
     </TradeProvider>
   )
 }
@@ -181,6 +180,7 @@ export const MarketAddZapWidget: FC<MarketAddZapWidgetProps> = ({
           </div>
         </div>
         <Transition
+          as="div"
           className="transition-[max-height] overflow-hidden"
           enter="duration-300 ease-in-out"
           enterFrom="transform max-h-0"

diff --git a/apps/market/components/MarketSection/MarketActions/MarketSwap/SwapStatsDisclosure.tsx b/apps/market/components/MarketSection/MarketActions/MarketSwap/SwapStatsDisclosure.tsx
@@ -44,6 +44,7 @@ export const SwapStatsDisclosure: FC = () => {
   return (
     <>
       <Transition
+        as="div"
         className="p-3 !pb-1 transition-[max-height] overflow-hidden"
         enter="duration-300 ease-in-out"
         enterFrom="transform max-h-0"
@@ -98,6 +99,7 @@ export const SwapStatsDisclosure: FC = () => {
                 </Disclosure.Button>
               </div>
               <Transition
+                as="div"
                 className="transition-[max-height] overflow-hidden"
                 enter="duration-300 ease-in-out"
                 enterFrom="transform max-h-0"

diff --git a/apps/market/components/MarketsSection/Tables/TableFilters/TableFiltersSearchMarket.tsx b/apps/market/components/MarketsSection/Tables/TableFilters/TableFiltersSearchMarket.tsx
@@ -53,6 +53,7 @@ export const TableFiltersSearchMarket: FC = () => {
         />
         <Transition
           appear
+          as="div"
           className="flex items-center"
           enter="transition duration-300 origin-center ease-out"
           enterFrom="transform scale-90 opacity-0"

diff --git a/apps/market/components/SettingsOverlay/SlippageToleranceDisclosure.tsx b/apps/market/components/SettingsOverlay/SlippageToleranceDisclosure.tsx
@@ -1,4 +1,4 @@
-import { Disclosure, Transition } from '@headlessui/react'
+import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from '@headlessui/react'
 import { ChevronRightIcon, InformationCircleIcon } from '@heroicons/react/24/outline'
 import { Trans, t } from '@lingui/macro'
 import { useSettings } from '@zenlink-interface/shared'
@@ -15,7 +15,7 @@ export const SlippageToleranceDisclosure: FC = () => {
     <Disclosure>
       {({ open }) => (
         <div className="border-b border-slate-500/20 dark:border-slate-200/5">
-          <Disclosure.Button
+          <DisclosureButton
             as="div"
             className="relative flex items-center justify-between w-full gap-3 cursor-pointer group rounded-xl"
           >
@@ -79,9 +79,9 @@ export const SlippageToleranceDisclosure: FC = () => {
                 </div>
               </div>
             </div>
-          </Disclosure.Button>
-
+          </DisclosureButton>
           <Transition
+            as="div"
             className="transition-[max-height] overflow-hidden mb-3"
             enter="duration-300 ease-in-out"
             enterFrom="transform max-h-0"
@@ -91,7 +91,7 @@ export const SlippageToleranceDisclosure: FC = () => {
             leaveTo="transform max-h-0"
             unmount={false}
           >
-            <Disclosure.Panel>
+            <DisclosurePanel>
               <Tab.Group
                 onChange={index => updateSlippageToleranceType(index === 0 ? 'auto' : 'custom')}
                 selectedIndex={slippageToleranceType === 'auto' ? 0 : 1}
@@ -123,7 +123,7 @@ export const SlippageToleranceDisclosure: FC = () => {
                   </Tab.Panel>
                 </Tab.Panels>
               </Tab.Group>
-            </Disclosure.Panel>
+            </DisclosurePanel>
           </Transition>
         </div>
       )}

diff --git a/apps/market/package.json b/apps/market/package.json
@@ -9,7 +9,7 @@
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next && rm -rf .swc && rm -rf .graphclient"
   },
   "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/apps/pool/components/AddSection/AddSectionStable.tsx b/apps/pool/components/AddSection/AddSectionStable.tsx
@@ -1,4 +1,4 @@
-import { Disclosure, Transition } from '@headlessui/react'
+import { Disclosure, DisclosurePanel, Transition } from '@headlessui/react'
 import { InformationCircleIcon, PlusIcon } from '@heroicons/react/24/solid'
 import { Checker, Web3Input, useStableSwapWithBase } from '@zenlink-interface/compat'
 import type { Token } from '@zenlink-interface/currency'
@@ -78,6 +78,7 @@ export const AddSectionStable: FC<{ pool: StableSwap }> = ({ pool }) => {
                       )}
                     />
                     <Transition
+                      as="div"
                       className="transition-[max-height] overflow-hidden"
                       enter="duration-300 ease-in-out"
                       enterFrom="transform max-h-0"
@@ -87,7 +88,7 @@ export const AddSectionStable: FC<{ pool: StableSwap }> = ({ pool }) => {
                       leaveTo="transform max-h-0"
                       unmount={false}
                     >
-                      <Disclosure.Panel unmount={false}>
+                      <DisclosurePanel unmount={false}>
                         {!tokens.length && (
                           <div className="flex flex-col p-3 gap-6">
                             <Skeleton.Box className="w-full h-[68px] bg-black/[0.12] dark:bg-white/[0.06]" />
@@ -146,7 +147,7 @@ export const AddSectionStable: FC<{ pool: StableSwap }> = ({ pool }) => {
                             </Checker.Custom>
                           </Checker.Connected>
                         </div>
-                      </Disclosure.Panel>
+                      </DisclosurePanel>
                     </Transition>
                   </>
                 )}

diff --git a/apps/pool/components/AddSection/AddSectionWidgetStandard.tsx b/apps/pool/components/AddSection/AddSectionWidgetStandard.tsx
@@ -1,4 +1,4 @@
-import { Disclosure, Transition } from '@headlessui/react'
+import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { PlusIcon } from '@heroicons/react/24/solid'
 import type { ParachainId } from '@zenlink-interface/chain'
@@ -55,7 +55,7 @@ export const AddSectionWidgetStandard: FC<AddSectionWidgetProps> = ({
                     <Widget.Header className="!pb-3 " title="1. Add Liquidity">
                       <div className="flex gap-3">
                         <SettingsOverlay chainId={chainId} variant="dialog" />
-                        <Disclosure.Button className="w-full pr-0.5">
+                        <DisclosureButton className="w-full pr-0.5">
                           <div className="flex items-center justify-between">
                             <div
                               className={classNames(
@@ -70,14 +70,15 @@ export const AddSectionWidgetStandard: FC<AddSectionWidgetProps> = ({
                               />
                             </div>
                           </div>
-                        </Disclosure.Button>
+                        </DisclosureButton>
                       </div>
                     </Widget.Header>
                   )
                 : (
                     <Widget.Header className="!pb-3" title={t`Add Liquidity`} />
                   )}
               <Transition
+                as="div"
                 className="transition-[max-height] overflow-hidden"
                 enter="duration-300 ease-in-out"
                 enterFrom="transform max-h-0"
@@ -87,7 +88,7 @@ export const AddSectionWidgetStandard: FC<AddSectionWidgetProps> = ({
                 leaveTo="transform max-h-0"
                 unmount={false}
               >
-                <Disclosure.Panel unmount={false}>
+                <DisclosurePanel unmount={false}>
                   <Web3Input.Currency
                     chainId={chainId}
                     className="p-3"
@@ -121,7 +122,7 @@ export const AddSectionWidgetStandard: FC<AddSectionWidgetProps> = ({
                     />
                     <div className="p-3">{children}</div>
                   </div>
-                </Disclosure.Panel>
+                </DisclosurePanel>
               </Transition>
             </>
           )}

diff --git a/apps/pool/components/NewPositionSection/SelectNetworkWidget.tsx b/apps/pool/components/NewPositionSection/SelectNetworkWidget.tsx
@@ -1,4 +1,4 @@
-import { Disclosure, Transition } from '@headlessui/react'
+import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from '@headlessui/react'
 import type { ParachainId } from '@zenlink-interface/chain'
 import chains from '@zenlink-interface/chain'
 import { Network, NetworkIcon, Typography, classNames } from '@zenlink-interface/ui'
@@ -21,15 +21,16 @@ export const SelectNetworkWidget: FC<SelectNetworkWidgetProps> = memo(function S
         <Disclosure>
           {() => (
             <>
-              <Disclosure.Button className="w-full pr-3">
+              <DisclosureButton className="w-full pr-3">
                 <div className="flex items-center justify-between">
                   <Widget.Header className="!pb-3" title={<Trans>1. Select Network</Trans>} />
                   <div className={classNames('w-6 h-6')}>
                     <NetworkIcon chainId={selectedNetwork} height={24} width={24} />
                   </div>
                 </div>
-              </Disclosure.Button>
+              </DisclosureButton>
               <Transition
+                as="div"
                 className="transition-[max-height] overflow-hidden"
                 enter="duration-300 ease-in-out"
                 enterFrom="transform max-h-0"
@@ -39,7 +40,7 @@ export const SelectNetworkWidget: FC<SelectNetworkWidgetProps> = memo(function S
                 leaveTo="transform max-h-0"
                 unmount={false}
               >
-                <Disclosure.Panel unmount={false}>
+                <DisclosurePanel unmount={false}>
                   <div className="p-3 space-y-3">
                     <Typography className="text-slate-700 dark:text-slate-300" variant="xs">
                       <Trans>Selected:</Trans>{' '}
@@ -56,7 +57,7 @@ export const SelectNetworkWidget: FC<SelectNetworkWidgetProps> = memo(function S
                       selectedNetworks={[selectedNetwork]}
                     />
                   </div>
-                </Disclosure.Panel>
+                </DisclosurePanel>
               </Transition>
             </>
           )}

diff --git a/apps/pool/components/NewPositionSection/SelectPoolTypeWidget.tsx b/apps/pool/components/NewPositionSection/SelectPoolTypeWidget.tsx
@@ -1,4 +1,4 @@
-import { Disclosure, Transition } from '@headlessui/react'
+import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from '@headlessui/react'
 import type { ParachainId } from '@zenlink-interface/chain'
 import { PoolFinderType } from '@zenlink-interface/compat'
 import { Tab, Tooltip, Typography } from '@zenlink-interface/ui'
@@ -50,6 +50,7 @@ export const SelectPoolTypeWidget: FC<SelectPoolTypeWidgetProps> = memo(
                       </Disclosure.Button>
                     )}
                 <Transition
+                  as="div"
                   className="transition-[max-height] overflow-hidden"
                   enter="duration-300 ease-in-out"
                   enterFrom="transform max-h-0"
@@ -59,11 +60,11 @@ export const SelectPoolTypeWidget: FC<SelectPoolTypeWidgetProps> = memo(
                   leaveTo="transform max-h-0"
                   unmount={false}
                 >
-                  <Disclosure.Panel unmount={false}>
+                  <DisclosurePanel unmount={false}>
                     <div className="p-3 pt-0">
                       <Tab.Group onChange={setPoolType} selectedIndex={poolType}>
                         <Tab.List className="grid grid-cols-2 mt-2">
-                          <Disclosure.Button>
+                          <DisclosureButton>
                             <Tab as="div" className="!h-[unset] p-2">
                               <div className="flex flex-col gap-0.5">
                                 <Typography className="text-slate-800 dark:text-slate-200" variant="xs" weight={500}>
@@ -74,8 +75,8 @@ export const SelectPoolTypeWidget: FC<SelectPoolTypeWidgetProps> = memo(
                                 </Typography>
                               </div>
                             </Tab>
-                          </Disclosure.Button>
-                          <Disclosure.Button>
+                          </DisclosureButton>
+                          <DisclosureButton>
                             <Tab as="div" className="!h-[unset] p-2">
                               <div className="flex flex-col gap-0.5 ">
                                 <Typography className="text-slate-800 dark:text-slate-200" variant="xs" weight={500}>
@@ -86,11 +87,11 @@ export const SelectPoolTypeWidget: FC<SelectPoolTypeWidgetProps> = memo(
                                 </Typography>
                               </div>
                             </Tab>
-                          </Disclosure.Button>
+                          </DisclosureButton>
                         </Tab.List>
                       </Tab.Group>
                     </div>
-                  </Disclosure.Panel>
+                  </DisclosurePanel>
                 </Transition>
               </>
             )}