diff --git a/src/components/ConnectButton.tsx b/src/components/ConnectButton.tsx index 2037ac83d4..e5120da76b 100644 --- a/src/components/ConnectButton.tsx +++ b/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 }, ]; diff --git a/src/components/ProgressModal.tsx b/src/components/ProgressModal.tsx index 1d8ec75128..0de9e4684d 100644 --- a/src/components/ProgressModal.tsx +++ b/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 = ({ 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'); diff --git a/src/hooks/use-progress.ts b/src/hooks/use-progress.ts new file mode 100644 index 0000000000..29b8773a50 --- /dev/null +++ b/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, + }; +}