Progress Modal UI

src/components/connect-button.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useCurrentUser } from '@site/src/hooks/use-current-user';
 import { Button } from '@site/src/ui/design-system/src/lib/Components/Button';
 import { useIsMobile } from '@site/src/hooks/use-is-mobile';
 import Dropdown from '@site/src/ui/design-system/src/lib/Components/Dropdown';
+import ProgressModal from '@site/src/components/progress-modal';
 
 const shortenAddress = (address: string, isMobile: boolean) => {
   if (!address) return '';
@@ -12,6 +13,15 @@ const shortenAddress = (address: string, isMobile: boolean) => {
 const ConnectButton: React.FC = () => {
   const { user, logIn, logOut } = useCurrentUser();
   const isMobile = useIsMobile();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleOpenProgress = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+  };
 
   if (!user.loggedIn) {
     return (
@@ -22,13 +32,19 @@ const ConnectButton: React.FC = () => {
   }
 
   const dropdownItems = [
+    { label: 'Progress', onClick: handleOpenProgress },
     { label: 'Disconnect', onClick: logOut },
   ];
 
   const fullAddress = user.addr ?? 'Unknown';
   const displayAddress = shortenAddress(fullAddress, isMobile);
 
-  return <Dropdown buttonLabel={displayAddress} items={dropdownItems} />;
+  return (
+    <>
+      <Dropdown buttonLabel={displayAddress} items={dropdownItems} />
+      <ProgressModal isOpen={isModalOpen} onClose={handleCloseModal} />
+    </>
+  )
 };
 
 export default ConnectButton;

src/components/progress-checklist.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheckSquare, faSquare } from "@fortawesome/free-solid-svg-icons";
+
+interface ChecklistItem {
+  label: string;
+  completed: boolean;
+}
+
+interface ChecklistProps {
+  title: string;
+  items: ChecklistItem[];
+}
+
+const Checklist: React.FC<ChecklistProps> = ({ title, items }) => {
+  return (
+    <div className="font-handwriting text-lg space-y-3">
+      <h2 className="font-bold text-base">{title}</h2>
+      <ul className="space-y-2 p-0 m-0 list-none">
+        {items.map((item, index) => (
+          <li key={index} className="flex items-center">
+            <span className="mr-3">
+              <FontAwesomeIcon
+                icon={item.completed ? faCheckSquare : faSquare}
+                size="lg"
+                className="text-black"
+              />
+            </span>
+            <span>{item.label}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Checklist;

src/components/progress-modal.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import Modal from '@site/src/ui/design-system/src/lib/Components/Modal';
+import Checklist from '@site/src/components/progress-checklist';
+import { Button } from '@site/src/ui/design-system/src/lib/Components/Button';
+
+interface ProgressModalProps {
+  isOpen: boolean;
+  onClose: boolean;
+}
+
+const ProgressModal: React.FC<ProgressModalProps> = ({ isOpen, onClose }) => {
+  const profileItems = [
+    { label: 'Create handle', completed: true },
+    { label: 'Add Github Profile', completed: true },
+    { label: 'Add how you found Flow', completed: false },
+    { label: 'Add contract addresses', completed: false },
+  ];
+
+  const challengeItems = [
+    { label: 'Complete first challenge', completed: true },
+  ];
+
+  const onProfileAction = () => {
+    console.log('TODO: Profile action');
+  };
+
+  const onChallengeAction = () => {
+    console.log('TODO: Challenge action');
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Progress">
+      <div className="space-y-6">
+        {/* Profile Section */}
+        <div className="space-y-4">
+          <Checklist title="Profile" items={profileItems} />
+          <div className="flex justify-center">
+            <Button size="sm" className="w-full max-w-md" onClick={onProfileAction}>
+              Update Profile to Complete Items
+            </Button>
+          </div>
+        </div>
+
+        {/* Challenges Section */}
+        <div className="space-y-4">
+          <Checklist title="Challenges" items={challengeItems} />
+          <div className="flex justify-center">
+            <Button size="sm" className="w-full max-w-md" onClick={onChallengeAction}>
+              View First Challenge to Complete
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ProgressModal;

src/ui/design-system/src/lib/Components/Modal/index.tsx

@@ -47,7 +47,7 @@ const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children, classNa
               {/* Header */}
               {title && (
                 <div className="px-4 py-3 border-b border-gray-300 dark:border-gray-700">
-                  <Dialog.Title as="h3" className="text-lg font-semibold">
+                  <Dialog.Title as="h3" className="text-lg font-semibold text-center">
                     {title}
                   </Dialog.Title>
                 </div>