Skip to content

Commit 07b15f3

Browse files
garyghayratgaryghayrat
authored
Add debug modal (#17)
* Add debug modal * Add pop-out icon * Use slightly different icon * Import icon instead * Move Modal to its own component * Add flex
1 parent dd222b3 commit 07b15f3

File tree

7 files changed

+135
-5
lines changed

7 files changed

+135
-5
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
"format": "yarn prettier --write ."
1212
},
1313
"dependencies": {
14+
"@headlessui/react": "^1.7.7",
15+
"@heroicons/react": "^2.0.14",
1416
"@next/font": "13.1.2",
1517
"@rainbow-me/rainbowkit": "^0.8.1",
1618
"@types/node": "18.11.18",

‎src/components/Button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export const Button = (props) => {
22
return (
33
<button
4-
className="inline-block rounded bg-blue-600 px-6 py-2.5 text-xs font-medium leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg"
4+
className="inline-block font-bold rounded-xl bg-blue-600 px-6 py-2.5 text-md leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg"
55
{...props}
66
/>
77
);

‎src/components/DebugButton.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Modal } from "@/components/Modal";
2+
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
3+
import { useState } from "react";
4+
5+
export const DebugButton = () => {
6+
const [openModal, setOpenModal] = useState(false);
7+
8+
return (
9+
<div>
10+
<button
11+
onClick={() => setOpenModal(true)}
12+
className="flex align-center font-bold rounded-xl bg-gray-700 px-6 py-2.5 text-md leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-gray-800 hover:shadow-lg focus:bg-gray-600 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-gray-800 active:shadow-lg"
13+
>
14+
Debug <ArrowTopRightOnSquareIcon className="h-5 w-5 ml-1" />
15+
</button>
16+
<Modal openState={openModal} handleClose={() => setOpenModal(false)} />
17+
</div>
18+
);
19+
};

‎src/components/Modal.tsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { Dialog, Transition } from "@headlessui/react";
2+
import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
3+
import { Fragment } from "react";
4+
5+
interface Props {
6+
openState: boolean;
7+
handleClose: () => void;
8+
}
9+
10+
export const Modal = ({ openState, handleClose }: Props) => {
11+
return (
12+
<Transition.Root show={openState} as={Fragment}>
13+
<Dialog as="div" className="relative z-10" onClose={handleClose}>
14+
<Transition.Child
15+
as={Fragment}
16+
enter="ease-out duration-300"
17+
enterFrom="opacity-0"
18+
enterTo="opacity-100"
19+
leave="ease-in duration-200"
20+
leaveFrom="opacity-100"
21+
leaveTo="opacity-0"
22+
>
23+
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
24+
</Transition.Child>
25+
26+
<div className="fixed inset-0 z-10 overflow-y-auto">
27+
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
28+
<Transition.Child
29+
as={Fragment}
30+
enter="ease-out duration-300"
31+
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
32+
enterTo="opacity-100 translate-y-0 sm:scale-100"
33+
leave="ease-in duration-200"
34+
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
35+
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
36+
>
37+
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-sm sm:p-6">
38+
<div>
39+
<div className="absolute top-0 right-0 pt-4 pr-4">
40+
<button
41+
type="button"
42+
className="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
43+
onClick={handleClose}
44+
>
45+
<span className="sr-only">Close</span>
46+
<XMarkIcon className="h-6 w-6" aria-hidden="true" />
47+
</button>
48+
</div>
49+
<div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
50+
<CheckIcon
51+
className="h-6 w-6 text-green-600"
52+
aria-hidden="true"
53+
/>
54+
</div>
55+
<div className="mt-3 text-center sm:mt-5">
56+
<Dialog.Title
57+
as="h3"
58+
className="text-lg font-medium leading-6 text-gray-900"
59+
>
60+
Debug Mode
61+
</Dialog.Title>
62+
<div className="mt-2">
63+
<p className="text-sm text-gray-500">
64+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
65+
Consequatur amet labore.
66+
</p>
67+
</div>
68+
</div>
69+
</div>
70+
</Dialog.Panel>
71+
</Transition.Child>
72+
</div>
73+
</div>
74+
</Dialog>
75+
</Transition.Root>
76+
);
77+
};

‎src/pages/_app.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import "@/styles/globals.css";
2-
import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
2+
import {
3+
getDefaultWallets,
4+
lightTheme,
5+
RainbowKitProvider,
6+
} from "@rainbow-me/rainbowkit";
37
import "@rainbow-me/rainbowkit/styles.css";
48
import type { AppProps } from "next/app";
59
import { configureChains, createClient, goerli, WagmiConfig } from "wagmi";
@@ -26,7 +30,10 @@ const wagmiClient = createClient({
2630
export default function App({ Component, pageProps }: AppProps) {
2731
return (
2832
<WagmiConfig client={wagmiClient}>
29-
<RainbowKitProvider chains={chains}>
33+
<RainbowKitProvider
34+
chains={chains}
35+
theme={lightTheme({ accentColor: "#2563eb" })}
36+
>
3037
<Component {...pageProps} />
3138
</RainbowKitProvider>
3239
</WagmiConfig>

‎src/pages/index.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1+
import { DebugButton } from "@/components/DebugButton";
12
import { ConnectButton } from "@rainbow-me/rainbowkit";
23
import { ChatRoom } from "src/pages/ChatRoom";
34

45
export const Home = () => {
56
return (
67
<>
78
<div className="flex flex-col h-screen bg-gray-900 px-8">
8-
<div className="flex justify-end my-4">
9+
<div className="flex justify-end my-4 gap-2">
10+
<DebugButton />
911
<ConnectButton />
1012
</div>
1113
<div className="h-full">

‎yarn.lock

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -804,6 +804,27 @@ __metadata:
804804
languageName: node
805805
linkType: hard
806806

807+
"@headlessui/react@npm:^1.7.7":
808+
version: 1.7.7
809+
resolution: "@headlessui/react@npm:1.7.7"
810+
dependencies:
811+
client-only: ^0.0.1
812+
peerDependencies:
813+
react: ^16 || ^17 || ^18
814+
react-dom: ^16 || ^17 || ^18
815+
checksum: 049d7ee46056fe96067f7b2f4f962672dfc824e68044ae38561a457278c8e38c0fd17592ab648ba5648e7e82bef9890eddbf329c9a00d11acf85700c7072a0bf
816+
languageName: node
817+
linkType: hard
818+
819+
"@heroicons/react@npm:^2.0.14":
820+
version: 2.0.14
821+
resolution: "@heroicons/react@npm:2.0.14"
822+
peerDependencies:
823+
react: ">= 16"
824+
checksum: d1623865c04e2bedc1ae370ca0a305bb0c775c7db171e29d03afc3032598105b7e8c9290e7d6b34a5f334e2a2c92e8e2aac1c5e89d1ea1fb7073cce6e03a7f16
825+
languageName: node
826+
linkType: hard
827+
807828
"@humanwhocodes/config-array@npm:^0.11.8":
808829
version: 0.11.8
809830
resolution: "@humanwhocodes/config-array@npm:0.11.8"
@@ -3165,6 +3186,8 @@ __metadata:
31653186
version: 0.0.0-use.local
31663187
resolution: "chatweb3-frontend@workspace:."
31673188
dependencies:
3189+
"@headlessui/react": ^1.7.7
3190+
"@heroicons/react": ^2.0.14
31683191
"@next/font": 13.1.2
31693192
"@rainbow-me/rainbowkit": ^0.8.1
31703193
"@trivago/prettier-plugin-sort-imports": ^4.0.0
@@ -3238,7 +3261,7 @@ __metadata:
32383261
languageName: node
32393262
linkType: hard
32403263

3241-
"client-only@npm:0.0.1":
3264+
"client-only@npm:0.0.1, client-only@npm:^0.0.1":
32423265
version: 0.0.1
32433266
resolution: "client-only@npm:0.0.1"
32443267
checksum: 0c16bf660dadb90610553c1d8946a7fdfb81d624adea073b8440b7d795d5b5b08beb3c950c6a2cf16279365a3265158a236876d92bce16423c485c322d7dfaf8

0 commit comments

Comments
 (0)