Feature/onboarding tutorial

src/components/Graph/Graph.tsx

@@ -47,6 +47,7 @@ import {
 import analytics from "../../firebase/analytics";
 import firestore, { StoreUrlObject } from "../../firebase/firestore";
 import generateShortUrl from "../../utils/generateShortUrl";
+import TutorialPopup from "../tutorial/TutorialPopup";
 import DraggableWindow from "./AnalysisWindow/AnalysisWindow";
 import Hotbar from "./Hotbar";
 import LandingPage from "./LandingPage/LandingPage";
@@ -81,6 +82,7 @@ interface GraphContextProps {
   doLayout: () => void;
   setNodeHighlight: (address: string, highlight: boolean) => void;
   getNodeCount: () => number;
+  setShowTutorial: (show: boolean) => void;
   focusedAddressData: AddressAnalysis | null;
 }
 
@@ -140,14 +142,16 @@ const GraphProvider: FC<GraphProviderProps> = ({
 
   // We make sure to calculate the layouted nodes and edges before rendering
   return (
-    <div style={{ height: "100%" }}>
-      <ReactFlowProvider>
-        <GraphProvided
-          initialNodes={calculateLayoutedElements(initialNodes, initialEdges)}
-          initialEdges={initialEdges}
-        />
-      </ReactFlowProvider>
-    </div>
+    <>
+      <div style={{ height: "100%" }}>
+        <ReactFlowProvider>
+          <GraphProvided
+            initialNodes={calculateLayoutedElements(initialNodes, initialEdges)}
+            initialEdges={initialEdges}
+          />
+        </ReactFlowProvider>
+      </div>
+    </>
   );
 };
 
@@ -542,6 +546,9 @@ const GraphProvided: FC<GraphProvidedProps> = ({
     return nodes.length;
   }
 
+  // Tutorial
+  const [showTutorial, setShowTutorial] = useState<boolean>(false);
+
   // Set up the context
   const graphContext: GraphContextProps = {
     addAddressPaths,
@@ -556,6 +563,7 @@ const GraphProvided: FC<GraphProvidedProps> = ({
     copyLink,
     setNodeHighlight,
     getNodeCount,
+    setShowTutorial,
     focusedAddressData,
   };
 
@@ -600,7 +608,11 @@ const GraphProvided: FC<GraphProvidedProps> = ({
               aria-hidden="true"
               src="https://tailwindui.com/img/[email protected]"
             />
-            <Controls position="top-right" showInteractive={false} />
+            {<Controls position="top-right" showInteractive={false} />}
+            <TutorialPopup
+              showTutorial={showTutorial}
+              setShowTutorial={setShowTutorial}
+            />
             <Background />
             <Panel position="top-left">
               <Legend />

src/components/Graph/Hotbar/Hotbar.tsx

@@ -1,62 +1,108 @@
-import { RectangleGroupIcon, ShareIcon } from "@heroicons/react/24/solid";
+import {
+  RectangleGroupIcon,
+  ShareIcon,
+  QuestionMarkCircleIcon,
+} from "@heroicons/react/24/outline";
 import { FC, useContext, useMemo, useState } from "react";
-
+import clsx from "clsx";
 import { GraphContext } from "../Graph";
 import ShareDialog from "../LandingPage/ShareDialog";
 
 interface HotbarButton {
   onClick?: () => void;
   Icon: any;
   name: string;
+  className?: string;
+}
+
+const HotbarButton: FC<HotbarButton> = ({ Icon, name, onClick, className }) => {
+  return (
+    <button
+      className={clsx("group flex flex-row items-center", className)}
+      key={name}
+      onClick={onClick}
+    >
+      <Icon className="h-8 w-8 rounded-lg p-1 text-gray-400 transition-all duration-200 hover:bg-gray-700 hover:text-white" />
+      <h1 className="pointer-events-none absolute ml-8 mt-0.5 w-max rounded-lg bg-gray-800 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 group-hover:opacity-100 dark:bg-gray-700">
+        {name}
+      </h1>
+    </button>
+  );
+};
+
+interface HotbarButtonGroupProps {
+  children: any;
+  className?: string;
 }
 
+const HotbarButtonGroup: FC<HotbarButtonGroupProps> = ({
+  children,
+  className,
+}) => {
+  return (
+    <div
+      className={clsx(
+        "flex flex-col items-center justify-center gap-y-0.5",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
 const Hotbar: FC = () => {
-  const { doLayout, copyLink, getSharingLink } = useContext(GraphContext);
+  const { doLayout, copyLink, getSharingLink, setShowTutorial } =
+    useContext(GraphContext);
 
   const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);
 
   const shareUrl = useMemo(() => getSharingLink(), []);
 
   const onShareUrl = () => {
     copyLink(shareUrl);
-  }
+  };
 
   const openShareDialog = () => {
     setIsShareDialogOpen(true);
-  }
-
-  const Buttons: HotbarButton[] = [
-    {
-      Icon: RectangleGroupIcon,
-      name: "Organize Layout",
-      onClick: doLayout,
-    },
-    {
-      Icon: ShareIcon,
-      name: "Share",
-      onClick: openShareDialog
-    }
-  ]
+  };
 
   return (
     <>
-      <div className="flex h-fit w-fit flex-col gap-y-1 rounded-lg bg-gray-800 p-2">
-        {Buttons.map((button) => {
-          return (
-            <button
-              className="group flex flex-row items-center"
-              key={button.name}
-              onClick={button.onClick}
-            >
-              <button.Icon className="h-10 w-10 rounded-lg p-1 text-blue-100 transition-all duration-200 hover:bg-gray-700 hover:text-blue-300" />
-              <h1 className="absolute ml-[3.25rem] mt-0.5 w-max rounded-lg bg-gray-800 px-3 py-2 text-sm font-medium text-blue-300 opacity-0 shadow-sm transition-opacity duration-300 group-hover:opacity-100 dark:bg-gray-700">
-                {button.name}
-              </h1>
-            </button>
-          );
-        })}
+      <div className="flex h-fit w-fit flex-col gap-y-1 divide-y-2 divide-gray-600 rounded-lg bg-gray-800  p-2">
+        <HotbarButtonGroup>
+          {/* <HotbarButton
+            Icon={MagnifyingGlassPlusIcon}
+            name="Search Address"
+            onClick={() => {}}
+          /> */}
+          <HotbarButton
+            Icon={RectangleGroupIcon}
+            name="Organize Layout"
+            onClick={doLayout}
+          />
+        </HotbarButtonGroup>
+        <HotbarButtonGroup className="pt-1">
+          <HotbarButton
+            Icon={ShareIcon}
+            name="Share"
+            onClick={openShareDialog}
+          />
+          <HotbarButton
+            Icon={QuestionMarkCircleIcon}
+            name="Tutorial"
+            onClick={() => {
+              setShowTutorial(true);
+            }}
+          />
+        </HotbarButtonGroup>
       </div>
-      <ShareDialog shareUrl={shareUrl} isOpen={isShareDialogOpen} setIsOpen={setIsShareDialogOpen} onShareUrl={onShareUrl} />
+      <ShareDialog
+        shareUrl={shareUrl}
+        isOpen={isShareDialogOpen}
+        setIsOpen={setIsShareDialogOpen}
+        onShareUrl={onShareUrl}
+      />
     </>
   );
 };

src/components/common/BigButton.tsx

@@ -22,14 +22,11 @@ const BigButton: FC<ButtonProps> = ({ onClick, text, Icon, className }) => {
       type="button"
       onClick={onClick}
       className={clsx(
-        "inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
+        "flex flex-row items-center justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2",
         className,
       )}
     >
-      <Icon
-        className="h-5 w-5 rounded-full  text-gray-400"
-        aria-hidden="true"
-      />
+      <Icon className="h-5 w-5  text-gray-400" aria-hidden="true" />
       {text}
     </button>
   );

src/components/common/Modal.tsx

@@ -0,0 +1,52 @@
+import { Transition } from "@headlessui/react";
+import { Fragment } from "react";
+import { Dialog } from "@headlessui/react";
+import { FC, ReactNode } from "react";
+
+interface ModalProps {
+  isOpen: boolean;
+  closeModal: () => void;
+  children: ReactNode;
+}
+
+const Modal: FC<ModalProps> = ({ isOpen, closeModal, children }) => {
+  return (
+    <>
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-10" onClose={closeModal}>
+          <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-black/25" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 flex items-center justify-center overflow-y-auto">
+            <div className="flex h-fit w-fit items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
+                  {children}
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+};
+
+export default Modal;