Hook up progress percentage

src/components/ConnectButton.tsx

@@ -5,6 +5,7 @@ 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/ProgressModal';
 import ProfileModal from '@site/src/components/ProfileModal';
+import { useProgress } from '../hooks/use-progress';
 
 const shortenAddress = (address: string, isMobile: boolean) => {
   if (!address) return '';
@@ -16,6 +17,7 @@ const ConnectButton: React.FC = () => {
   const isMobile = useIsMobile();
   const [isProgressModalOpen, setIsProgressModalOpen] = useState(false);
   const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);
+  const { getProgress } = useProgress();
 
   const handleOpenProgress = () => {
     setIsProgressModalOpen(true);
@@ -42,7 +44,10 @@ const ConnectButton: React.FC = () => {
   }
 
   const dropdownItems = [
-    { label: 'Progress', onClick: handleOpenProgress },
+    {
+      label: `Progress (${Math.floor(getProgress() * 100)}%)`,
+      onClick: handleOpenProgress,
+    },
     { label: 'Profile', onClick: handleOpenProfileModal },
     { label: 'Disconnect', onClick: logOut },
   ];

src/components/ProgressModal.tsx

@@ -2,9 +2,7 @@ import React from 'react';
 import Modal from '@site/src/ui/design-system/src/lib/Components/Modal';
 import Checklist from '@site/src/components/ProgressChecklist';
 import { Button } from '@site/src/ui/design-system/src/lib/Components/Button';
-import { useProfile } from '../hooks/use-profile';
-import { useCurrentUser } from '../hooks/use-current-user';
-import { SocialType } from '../types/gold-star';
+import { useProgress } from '../hooks/use-progress';
 
 interface ProgressModalProps {
   isOpen: boolean;
@@ -17,31 +15,7 @@ const ProgressModal: React.FC<ProgressModalProps> = ({
   onClose,
   onOpenProfileModal,
 }) => {
-  const user = useCurrentUser();
-  const { profile } = useProfile(user.user.addr);
-
-  const profileItems = [
-    {
-      label: 'Create handle',
-      completed: profile && !!profile.handle,
-    },
-    {
-      label: 'Add Github Profile',
-      completed: profile && !!profile.socials[SocialType.GITHUB],
-    },
-    {
-      label: 'Add how you found Flow',
-      completed: profile && !!profile.referralSource,
-    },
-    {
-      label: 'Add contract addresses',
-      completed: profile && Object.keys(profile.deployedContracts).length > 0,
-    },
-  ] as { label: string; completed: boolean }[];
-
-  const challengeItems = [
-    { label: 'Complete first challenge', completed: true },
-  ];
+  const { profileItems, challengeItems } = useProgress();
 
   const onChallengeAction = () => {
     console.log('TODO: Challenge action');

src/hooks/use-progress.ts

@@ -0,0 +1,52 @@
+import { SocialType } from '../types/gold-star';
+import { useCurrentUser } from './use-current-user';
+import { useProfile } from './use-profile';
+
+export interface ProgressItem {
+  label: string;
+  completed: boolean;
+}
+
+export function useProgress() {
+  const { user } = useCurrentUser();
+  const { profile } = useProfile(user.addr);
+
+  const profileItems = [
+    {
+      label: 'Create handle',
+      completed: profile && !!profile.handle,
+    },
+    {
+      label: 'Add Github Profile',
+      completed: profile && !!profile.socials[SocialType.GITHUB],
+    },
+    {
+      label: 'Add how you found Flow',
+      completed: profile && !!profile.referralSource,
+    },
+    {
+      label: 'Add contract addresses',
+      completed: profile && Object.keys(profile.deployedContracts).length > 0,
+    },
+  ] as ProgressItem[];
+
+  const challengeItems = [
+    {
+      label: 'Complete first challenge',
+      completed: false,
+    },
+  ] as ProgressItem[];
+
+  function getProgress() {
+    const items = [...profileItems, ...challengeItems];
+    const total = items.length;
+    const completed = items.filter((item) => item.completed).length;
+    return completed / total;
+  }
+
+  return {
+    profileItems,
+    challengeItems,
+    getProgress,
+  };
+}