Skip to content

Commit 8c0349a

Browse files
iamrohitchavdaRohit Chavda
iamrohitchavda
and
Rohit Chavda
authored
fix: updated the headlessui/react package and refactored its usage (#1725)
* fix: updated the headlessui/react package and refactored its usage * fix: importing neccessary components * fix: prettier formatting --------- Co-authored-by: Rohit Chavda <rohitchavda@socialpilot.co>
1 parent 70ecdda commit 8c0349a

12 files changed

Lines changed: 195 additions & 139 deletions

‎packages/wallet/frontend/src/components/Menu.tsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { userService } from '@/lib/api/user'
22
import { Link } from '@/ui/Link'
33
import { Logo } from '@/ui/Logo'
4-
import { Dialog, Transition } from '@headlessui/react'
4+
import {
5+
Dialog,
6+
DialogPanel,
7+
Transition,
8+
TransitionChild
9+
} from '@headlessui/react'
510
import { useRouter } from 'next/router'
611
import {
712
Fragment,
@@ -166,7 +171,7 @@ export const Menu = () => {
166171

167172
return (
168173
<>
169-
<Transition.Root
174+
<Transition
170175
show={sidebarIsOpen}
171176
as={Fragment}
172177
afterEnter={() => {
@@ -180,7 +185,7 @@ export const Menu = () => {
180185
className="relative z-20 md:hidden"
181186
onClose={setSidebarIsOpen}
182187
>
183-
<Transition.Child
188+
<TransitionChild
184189
as={Fragment}
185190
enter="transition-opacity duration-500"
186191
enterFrom="opacity-0"
@@ -190,9 +195,9 @@ export const Menu = () => {
190195
leaveTo="opacity-0"
191196
>
192197
<div className="fixed inset-0 bg-green-modal/30 dark:bg-[#000000]/75" />
193-
</Transition.Child>
198+
</TransitionChild>
194199
<div className="fixed inset-y-0 right-0 flex">
195-
<Transition.Child
200+
<TransitionChild
196201
as={Fragment}
197202
enter="transform transition duration-500"
198203
enterFrom="translate-x-full"
@@ -201,7 +206,7 @@ export const Menu = () => {
201206
leaveFrom="translate-x-0"
202207
leaveTo="translate-x-full"
203208
>
204-
<Dialog.Panel className="relative flex flex-col bg-white p-6 dark:bg-purple">
209+
<DialogPanel className="relative flex flex-col bg-white p-6 dark:bg-purple">
205210
<button
206211
className="mb-4 block cursor-pointer self-end border-none px-1"
207212
type="button"
@@ -223,11 +228,11 @@ export const Menu = () => {
223228
))}
224229
</nav>
225230
<LogoutButton />
226-
</Dialog.Panel>
227-
</Transition.Child>
231+
</DialogPanel>
232+
</TransitionChild>
228233
</div>
229234
</Dialog>
230-
</Transition.Root>
235+
</Transition>
231236

232237
<header className="fixed inset-x-0 top-0 block h-[84px] border-b-2 border-dotted bg-white px-6 dark:bg-purple md:hidden">
233238
<nav className="flex items-center justify-between">

‎packages/wallet/frontend/src/components/dialogs/ConfirmationDialog.tsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
import { Button } from '@/ui/Button'
2-
import { Dialog, Transition } from '@headlessui/react'
2+
import {
3+
Dialog,
4+
DialogPanel,
5+
Transition,
6+
TransitionChild
7+
} from '@headlessui/react'
38
import { Fragment } from 'react'
49
import type { DialogProps } from '@/lib/types/dialog'
510
import { Warning } from '../icons/Warning'
@@ -18,9 +23,9 @@ export const ConfirmationDialog = ({
1823
confirmText
1924
}: ConfirmationDialogProps) => {
2025
return (
21-
<Transition.Root show={true} as={Fragment} appear={true}>
26+
<Transition show={true} as={Fragment} appear={true}>
2227
<Dialog as="div" className="relative z-10" onClose={onClose}>
23-
<Transition.Child
28+
<TransitionChild
2429
as={Fragment}
2530
enter="ease-out duration-300"
2631
enterFrom="opacity-0"
@@ -30,11 +35,11 @@ export const ConfirmationDialog = ({
3035
leaveTo="opacity-0"
3136
>
3237
<div className="fixed inset-0 bg-green-modal/75 transition-opacity dark:bg-black/75" />
33-
</Transition.Child>
38+
</TransitionChild>
3439

3540
<div className="fixed inset-0 z-10 overflow-y-auto">
3641
<div className="flex min-h-full items-center justify-center p-4">
37-
<Transition.Child
42+
<TransitionChild
3843
as={Fragment}
3944
enter="ease-out duration-300"
4045
enterFrom="opacity-0 translate-y-4"
@@ -43,7 +48,7 @@ export const ConfirmationDialog = ({
4348
leaveFrom="opacity-100 translate-y-0"
4449
leaveTo="opacity-0 translate-y-4"
4550
>
46-
<Dialog.Panel className="relative w-full max-w-md space-y-4 overflow-hidden rounded-lg bg-white p-8 shadow-xl dark:bg-purple">
51+
<DialogPanel className="relative w-full max-w-md space-y-4 overflow-hidden rounded-lg bg-white p-8 shadow-xl dark:bg-purple">
4752
<div className="flex flex-col px-4 text-center">
4853
<Warning strokeWidth={2} className="mx-auto h-16 w-16" />
4954
<p className="text-center font-semibold text-pink-dark dark:text-pink-neon">
@@ -73,11 +78,11 @@ export const ConfirmationDialog = ({
7378
</Button>
7479
</div>
7580
</div>
76-
</Dialog.Panel>
77-
</Transition.Child>
81+
</DialogPanel>
82+
</TransitionChild>
7883
</div>
7984
</div>
8085
</Dialog>
81-
</Transition.Root>
86+
</Transition>
8287
)
8388
}

‎packages/wallet/frontend/src/components/dialogs/CreateWalletAddressDialog.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import { Button } from '@/ui/Button'
2-
import { Dialog, Transition } from '@headlessui/react'
2+
import {
3+
Dialog,
4+
DialogPanel,
5+
DialogTitle,
6+
Transition,
7+
TransitionChild
8+
} from '@headlessui/react'
39
import { Fragment } from 'react'
410
import type { DialogProps } from '@/lib/types/dialog'
511
import { Form } from '@/ui/forms/Form'
@@ -32,9 +38,9 @@ export const CreateWalletAddressDialog = ({
3238
const accountId = router.query.accountId as string
3339

3440
return (
35-
<Transition.Root show={true} as={Fragment} appear={true}>
41+
<Transition show={true} as={Fragment} appear={true}>
3642
<Dialog as="div" className="relative z-10" onClose={onClose}>
37-
<Transition.Child
43+
<TransitionChild
3844
as={Fragment}
3945
enter="ease-out duration-300"
4046
enterFrom="opacity-0"
@@ -44,11 +50,11 @@ export const CreateWalletAddressDialog = ({
4450
leaveTo="opacity-0"
4551
>
4652
<div className="fixed inset-0 bg-green-modal/75 transition-opacity dark:bg-black/75" />
47-
</Transition.Child>
53+
</TransitionChild>
4854

4955
<div className="fixed inset-0 z-10 overflow-y-auto">
5056
<div className="flex min-h-full items-center justify-center p-4">
51-
<Transition.Child
57+
<TransitionChild
5258
as={Fragment}
5359
enter="ease-out duration-300"
5460
enterFrom="opacity-0 translate-y-4"
@@ -57,13 +63,10 @@ export const CreateWalletAddressDialog = ({
5763
leaveFrom="opacity-100 translate-y-0"
5864
leaveTo="opacity-0 translate-y-4"
5965
>
60-
<Dialog.Panel className="relative w-full max-w-xl space-y-4 overflow-hidden rounded-lg bg-white p-8 shadow-xl dark:bg-purple">
61-
<Dialog.Title
62-
as="h3"
63-
className="text-center text-2xl font-bold"
64-
>
66+
<DialogPanel className="relative w-full max-w-xl space-y-4 overflow-hidden rounded-lg bg-white p-8 shadow-xl dark:bg-purple">
67+
<DialogTitle as="h3" className="text-center text-2xl font-bold">
6568
Create Payment Pointer
66-
</Dialog.Title>
69+
</DialogTitle>
6770
<Form
6871
form={createWalletAddressForm}
6972
onSubmit={async (data) => {
@@ -140,11 +143,11 @@ export const CreateWalletAddressDialog = ({
140143
</Button>
141144
</div>
142145
</Form>
143-
</Dialog.Panel>
144-
</Transition.Child>
146+
</DialogPanel>
147+
</TransitionChild>
145148
</div>
146149
</div>
147150
</Dialog>
148-
</Transition.Root>
151+
</Transition>
149152
)
150153
}

‎packages/wallet/frontend/src/components/dialogs/DepositDialog.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import { Button } from '@/ui/Button'
2-
import { Dialog, Transition } from '@headlessui/react'
2+
import {
3+
Dialog,
4+
DialogPanel,
5+
DialogTitle,
6+
Transition,
7+
TransitionChild
8+
} from '@headlessui/react'
39
import { Fragment, useEffect } from 'react'
410
import type { DialogProps } from '@/lib/types/dialog'
511
import { Form } from '@/ui/forms/Form'
@@ -33,9 +39,9 @@ export const DepositDialog = ({
3339
}, [])
3440

3541
return (
36-
<Transition.Root show={true} as={Fragment} appear={true}>
42+
<Transition show={true} as={Fragment} appear={true}>
3743
<Dialog as="div" className="relative z-10" onClose={onClose}>
38-
<Transition.Child
44+
<TransitionChild
3945
as={Fragment}
4046
enter="ease-out duration-300"
4147
enterFrom="opacity-0"
@@ -45,11 +51,11 @@ export const DepositDialog = ({
4551
leaveTo="opacity-0"
4652
>
4753
<div className="fixed inset-0 bg-green-modal/75 transition-opacity dark:bg-black/75" />
48-
</Transition.Child>
54+
</TransitionChild>
4955

5056
<div className="fixed inset-0 z-10 overflow-y-auto">
5157
<div className="flex min-h-full items-center justify-center p-4">
52-
<Transition.Child
58+
<TransitionChild
5359
as={Fragment}
5460
enter="ease-out duration-300"
5561
enterFrom="opacity-0 translate-y-4"
@@ -58,13 +64,10 @@ export const DepositDialog = ({
5864
leaveFrom="opacity-100 translate-y-0"
5965
leaveTo="opacity-0 translate-y-4"
6066
>
61-
<Dialog.Panel className="relative w-full max-w-xl space-y-4 overflow-hidden rounded-lg bg-white p-8 shadow-xl dark:bg-purple">
62-
<Dialog.Title
63-
as="h3"
64-
className="text-center text-2xl font-bold"
65-
>
67+
<DialogPanel className="relative w-full max-w-xl space-y-4 overflow-hidden rounded-lg bg-white p-8 shadow-xl dark:bg-purple">
68+
<DialogTitle as="h3" className="text-center text-2xl font-bold">
6669
Deposit to Account
67-
</Dialog.Title>
70+
</DialogTitle>
6871
<p className="text-xs text-center">
6972
A small fee will be applied when making a deposit.
7073
</p>
@@ -131,11 +134,11 @@ export const DepositDialog = ({
131134
</Button>
132135
</div>
133136
</Form>
134-
</Dialog.Panel>
135-
</Transition.Child>
137+
</DialogPanel>
138+
</TransitionChild>
136139
</div>
137140
</div>
138141
</Dialog>
139-
</Transition.Root>
142+
</Transition>
140143
)
141144
}

‎packages/wallet/frontend/src/components/dialogs/EditWalletAddressDialog.tsx‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import { Button } from '@/ui/Button'
2-
import { Dialog, Transition } from '@headlessui/react'
2+
import {
3+
Dialog,
4+
DialogPanel,
5+
DialogTitle,
6+
Transition,
7+
TransitionChild
8+
} from '@headlessui/react'
39
import { Fragment } from 'react'
410
import type { DialogProps } from '@/lib/types/dialog'
511
import { Form } from '@/ui/forms/Form'
@@ -34,9 +40,9 @@ export const EditWalletAddressDialog = ({
3440
})
3541

3642
return (
37-
<Transition.Root show={true} as={Fragment} appear={true}>
43+
<Transition show={true} as={Fragment} appear={true}>
3844
<Dialog as="div" className="relative z-10" onClose={onClose}>
39-
<Transition.Child
45+
<TransitionChild
4046
as={Fragment}
4147
enter="ease-out duration-300"
4248
enterFrom="opacity-0"
@@ -46,11 +52,11 @@ export const EditWalletAddressDialog = ({
4652
leaveTo="opacity-0"
4753
>
4854
<div className="fixed inset-0 bg-green-modal/75 dark:bg-black/75 transition-opacity" />
49-
</Transition.Child>
55+
</TransitionChild>
5056

5157
<div className="fixed inset-0 z-10 overflow-y-auto">
5258
<div className="flex min-h-full items-center justify-center p-4">
53-
<Transition.Child
59+
<TransitionChild
5460
as={Fragment}
5561
enter="ease-out duration-300"
5662
enterFrom="opacity-0 translate-y-4"
@@ -59,13 +65,13 @@ export const EditWalletAddressDialog = ({
5965
leaveFrom="opacity-100 translate-y-0"
6066
leaveTo="opacity-0 translate-y-4"
6167
>
62-
<Dialog.Panel className="relative w-full max-w-xl space-y-4 overflow-hidden rounded-lg bg-white dark:bg-purple p-8 shadow-xl">
63-
<Dialog.Title
68+
<DialogPanel className="relative w-full max-w-xl space-y-4 overflow-hidden rounded-lg bg-white dark:bg-purple p-8 shadow-xl">
69+
<DialogTitle
6470
as="h3"
6571
className="text-center text-2xl font-medium"
6672
>
6773
Edit Payment Pointer
68-
</Dialog.Title>
74+
</DialogTitle>
6975

7076
<div className="px-4">
7177
<Form
@@ -134,11 +140,11 @@ export const EditWalletAddressDialog = ({
134140
</div>
135141
</Form>
136142
</div>
137-
</Dialog.Panel>
138-
</Transition.Child>
143+
</DialogPanel>
144+
</TransitionChild>
139145
</div>
140146
</div>
141147
</Dialog>
142-
</Transition.Root>
148+
</Transition>
143149
)
144150
}

0 commit comments

Comments
 (0)