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

Author: garyghayrat

package.json

@@ -11,6 +11,8 @@
     "format": "yarn prettier --write ."
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.7",
+    "@heroicons/react": "^2.0.14",
     "@next/font": "13.1.2",
     "@rainbow-me/rainbowkit": "^0.8.1",
     "@types/node": "18.11.18",

src/components/Button.tsx

@@ -1,7 +1,7 @@
 export const Button = (props) => {
   return (
     <button
-      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"
+      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"
       {...props}
     />
   );

src/components/DebugButton.tsx

@@ -0,0 +1,19 @@
+import { Modal } from "@/components/Modal";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
+import { useState } from "react";
+
+export const DebugButton = () => {
+  const [openModal, setOpenModal] = useState(false);
+
+  return (
+    <div>
+      <button
+        onClick={() => setOpenModal(true)}
+        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"
+      >
+        Debug <ArrowTopRightOnSquareIcon className="h-5 w-5 ml-1" />
+      </button>
+      <Modal openState={openModal} handleClose={() => setOpenModal(false)} />
+    </div>
+  );
+};

src/components/Modal.tsx

@@ -0,0 +1,77 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { CheckIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Fragment } from "react";
+
+interface Props {
+  openState: boolean;
+  handleClose: () => void;
+}
+
+export const Modal = ({ openState, handleClose }: Props) => {
+  return (
+    <Transition.Root show={openState} as={Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={handleClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <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">
+                <div>
+                  <div className="absolute top-0 right-0 pt-4 pr-4">
+                    <button
+                      type="button"
+                      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"
+                      onClick={handleClose}
+                    >
+                      <span className="sr-only">Close</span>
+                      <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                    </button>
+                  </div>
+                  <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+                    <CheckIcon
+                      className="h-6 w-6 text-green-600"
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <div className="mt-3 text-center sm:mt-5">
+                    <Dialog.Title
+                      as="h3"
+                      className="text-lg font-medium leading-6 text-gray-900"
+                    >
+                      Debug Mode
+                    </Dialog.Title>
+                    <div className="mt-2">
+                      <p className="text-sm text-gray-500">
+                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                        Consequatur amet labore.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

src/pages/_app.tsx

@@ -1,5 +1,9 @@
 import "@/styles/globals.css";
-import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import {
+  getDefaultWallets,
+  lightTheme,
+  RainbowKitProvider,
+} from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
 import type { AppProps } from "next/app";
 import { configureChains, createClient, goerli, WagmiConfig } from "wagmi";
@@ -26,7 +30,10 @@ const wagmiClient = createClient({
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <WagmiConfig client={wagmiClient}>
-      <RainbowKitProvider chains={chains}>
+      <RainbowKitProvider
+        chains={chains}
+        theme={lightTheme({ accentColor: "#2563eb" })}
+      >
         <Component {...pageProps} />
       </RainbowKitProvider>
     </WagmiConfig>

src/pages/index.tsx

@@ -1,11 +1,13 @@
+import { DebugButton } from "@/components/DebugButton";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { ChatRoom } from "src/pages/ChatRoom";
 
 export const Home = () => {
   return (
     <>
       <div className="flex flex-col h-screen bg-gray-900 px-8">
-        <div className="flex justify-end my-4">
+        <div className="flex justify-end my-4 gap-2">
+          <DebugButton />
           <ConnectButton />
         </div>
         <div className="h-full">

yarn.lock

@@ -804,6 +804,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@headlessui/react@npm:^1.7.7":
+  version: 1.7.7
+  resolution: "@headlessui/react@npm:1.7.7"
+  dependencies:
+    client-only: ^0.0.1
+  peerDependencies:
+    react: ^16 || ^17 || ^18
+    react-dom: ^16 || ^17 || ^18
+  checksum: 049d7ee46056fe96067f7b2f4f962672dfc824e68044ae38561a457278c8e38c0fd17592ab648ba5648e7e82bef9890eddbf329c9a00d11acf85700c7072a0bf
+  languageName: node
+  linkType: hard
+
+"@heroicons/react@npm:^2.0.14":
+  version: 2.0.14
+  resolution: "@heroicons/react@npm:2.0.14"
+  peerDependencies:
+    react: ">= 16"
+  checksum: d1623865c04e2bedc1ae370ca0a305bb0c775c7db171e29d03afc3032598105b7e8c9290e7d6b34a5f334e2a2c92e8e2aac1c5e89d1ea1fb7073cce6e03a7f16
+  languageName: node
+  linkType: hard
+
 "@humanwhocodes/config-array@npm:^0.11.8":
   version: 0.11.8
   resolution: "@humanwhocodes/config-array@npm:0.11.8"
@@ -3165,6 +3186,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "chatweb3-frontend@workspace:."
   dependencies:
+    "@headlessui/react": ^1.7.7
+    "@heroicons/react": ^2.0.14
     "@next/font": 13.1.2
     "@rainbow-me/rainbowkit": ^0.8.1
     "@trivago/prettier-plugin-sort-imports": ^4.0.0
@@ -3238,7 +3261,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"client-only@npm:0.0.1":
+"client-only@npm:0.0.1, client-only@npm:^0.0.1":
   version: 0.0.1
   resolution: "client-only@npm:0.0.1"
   checksum: 0c16bf660dadb90610553c1d8946a7fdfb81d624adea073b8440b7d795d5b5b08beb3c950c6a2cf16279365a3265158a236876d92bce16423c485c322d7dfaf8